Retrieving JSON information from an external API

Question

Retrieving JSON information from an external API

Having trouble retrieving data from an API to populate the "output" div. The error message says that $ is undefined. Any ideas on what could be 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>

javascript json ajax

Answer 1

Answer №1

As noted by Sirko in the previous feedback, your attempt to utilize the JQuery JavaScript library is failing due to missing inclusion of the library itself.

To rectify this issue, you have two options: either download JQuery from the official website here and include it using the following code:

<script src="path_to_local_jquery.js"/>

Alternatively, you can opt for external inclusion as outlined in the CDN section of the provided link.

Furthermore, remember that script tags should be placed within either the head or body sections of your HTML document. For ensuring that your custom script runs after the page has loaded completely, consider utilizing JQuery's document ready method.

Answer 2

As noted by Sirko in the previous feedback, your attempt to utilize the JQuery JavaScript library is failing due to missing inclusion of the library itself.

To rectify this issue, you have two options: either download JQuery from the official website here and include it using the following code:

<script src="path_to_local_jquery.js"/>

Alternatively, you can opt for external inclusion as outlined in the CDN section of the provided link.

Furthermore, remember that script tags should be placed within either the head or body sections of your HTML document. For ensuring that your custom script runs after the page has loaded completely, consider utilizing JQuery's document ready method.

Answer 3

Answer №2

The symbol $ is not a native part of JavaScript; it is actually a shorthand for the popular third-party library jQuery ($ === jQuery).

In order to utilize jQuery, you must first include it as a dependency in your HTML file by adding a script tag with a src attribute pointing to the URI of the source file. Only then can you begin using its features.

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

Answer 4

The symbol $ is not a native part of JavaScript; it is actually a shorthand for the popular third-party library jQuery ($ === jQuery).

In order to utilize jQuery, you must first include it as a dependency in your HTML file by adding a script tag with a src attribute pointing to the URI of the source file. Only then can you begin using its features.

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

Answer 5

Answer №3

Make sure to include jQuery in your project, either by using a CDN link or by downloading and referencing it locally. Ensure the DOM is fully loaded before making any calls. More information on this can be found 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);
    }
   });
});

Answer 6

Make sure to include jQuery in your project, either by using a CDN link or by downloading and referencing it locally. Ensure the DOM is fully loaded before making any calls. More information on this can be found 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);
    }
   });
});

Retrieving JSON information from an external API

Answer №1

Answer №2

Answer №3

Similar questions

Tips on relocating the input field to display the answer

What is the best method for extracting JSON objects from an HTML page after executing a JS script with PhantomJS, and then transferring them to Java code?

Navigating an Angular JSON object: A guide

JSON file organization

JavaScript Regular Expressions: Naming Conventions

Is there a way to keep the modal window open in React without it automatically closing?

Passing a particular object from an array of objects as props in React Native

How to activate select only when specific options are chosen using jQuery

Hiding dropdownlist options in an Angular JS application

What is the best way to invoke the datepicker function on all rows of table data that share the 'datepicker' class?

Replacing jQuery.ajax from a different directory/domain - problem with using relative URLs

Struggling with Conditional rendering in React JS - Need help!

I'm not sure where to set the timeout for automatically refreshing the page

Create a selection menu in an HTML dropdown list using unique values from a JSON object that is separated by commas

The server could not locate the desired response to the options provided

What could be the reason for the history.length being 2 on the initial page?

Using Pyspark to Extract JSON Data from Individual Files within a Folder and Organizing it in Separate Dataframes

Enhancing Form Validation with AJAX in a Django Template

Nodejs is utilized to alter the data format as it is transferred from the client to the server

Tips for showcasing an item with the chosen value in a dropdown menu