CODEWITHSUNDEEP
javascriptjsonajax
KevMoe
KevMoe

Reputation: 443

Calling json data from an api

I am trying to retrieve data from an api and use it to populate the div with the ID "output". I get an error that the $ is undefined. Can anyone help determine what I am missing?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
</head>

<body style="margin: 0px; padding: 0px;">

<div id="fullscreen">
<div id="output">

</div>

</div>

</body>
<script>
$.ajax({
type: 'GET',
url: "https://apiurl.com",
dataType: "json",
crossDomain: true,
success: function( response ) {
        console.log( response ); // server response
        var id = response[0];       
        var vname = response[1];
        $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
}
});
</script>
</html>

Upvotes: 0

Views: 135

Answers (3)

Michael Ritter
Michael Ritter

Reputation: 630

As Sirko already explained in the comments, you are trying to use the javascript library JQuery, but the library is not available because you didn't include it.

You can include it by either downloading JQuery here and including it via 

<script src="src_to_local_jquery.js"/>

or by including it externally (described in CDN section of above link)

Also note, that script tags should be put either in the head or the body section. To make sure your custom script is executed after the page is ready, you can use JQuery's document ready method.

Upvotes: 2

Akinjide
Akinjide

Reputation: 2753

Include jQuery either as a CDN or download add reference locally. Then make sure the DOM is ready before you make the call. You can read more about that here

<script src="local_jquery.js"/>
// OR
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>


$(function() {
  $.ajax({
    type: 'GET',
    url: "https://apiurl.com",
    dataType: "json",
    crossDomain: true,
    success: function( response ) {
        console.log( response ); // server response
        var id = response[0];       
        var vname = response[1];
        $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
    }
   });
});

Upvotes: 0

Tyrell
Tyrell

Reputation: 1

The $ sign is not part of the JavaScript language, it is a short hand for a third party library jQuery ($ === jQuery).

You need to add it as a dependency in your html file with a script tag with a src attribute containing the URI for the source file before you can use it.

<html>
  <head></head>
  <body>
    ...
    ...
    <script src="//code.jquery.com/jquery-3.1.1.js"></script>
    <script>
       $(function () {
         // Your code here
       });
    </script>
  </body>
</html>

Upvotes: 0

Related Questions