When attempting to log an AJAX/JSON request, the console.log statement is displaying 'undefined'

Question

When attempting to log an AJAX/JSON request, the console.log statement is displaying 'undefined'

Being new to AJAX, I have encountered an issue that I believe others may have faced as well. Despite numerous attempts and extensive research, I am unable to find a solution to this error. I am confident that it is something simple. Any help would be greatly appreciated.

// defining variable for JSON request
var request = new XMLHttpRequest();

// initiating GET request for specified JSON URL
request.open('GET', 'http://api.fixer.io/latest');
ourRequest.onload = function () {
    var data = JSON.parse(request.responseText);
    console.log(data[1]);
};

request.send();

javascript json ajax

Answer 1

Answer №1

ourData is actually a JavaScript object and not an array.

If you are trying to access the date using ourData[1], you should instead use either ourData.date or ourData['date']

// Defining a variable for our JSON request
var ourRequest = new XMLHttpRequest();

// Making a GET request to retrieve data from a specified JSON link
ourRequest.open('GET', 'https://api.fixer.io/latest');
ourRequest.onload = function () {
    var ourData = JSON.parse(ourRequest.responseText);
    console.log(ourData['date']);
    console.log(ourData.date);
};

ourRequest.send();

Answer 2

ourData is actually a JavaScript object and not an array.

If you are trying to access the date using ourData[1], you should instead use either ourData.date or ourData['date']

// Defining a variable for our JSON request
var ourRequest = new XMLHttpRequest();

// Making a GET request to retrieve data from a specified JSON link
ourRequest.open('GET', 'https://api.fixer.io/latest');
ourRequest.onload = function () {
    var ourData = JSON.parse(ourRequest.responseText);
    console.log(ourData['date']);
    console.log(ourData.date);
};

ourRequest.send();

Answer 3

Answer №2

To handle the response in Json format, you can utilize the provided code snippet and customize it as needed:

var request = new XMLHttpRequest();

// Make a GET request to the specified JSON link
request.open('GET', 'http://api.fixer.io/latest');
request.onload = function () {
    var data = JSON.parse(request.responseText);
    console.log(data['date']);
    console.log(data.date); // Alternatively, this format can be used
    console.log(data['base']);
    console.log(data.base);
    console.log(data['rates']);
    console.log(data.rates);
    console.log(data['rates']['AUD']);
    console.log(data['rates'].AUD);
};

request.send();

Answer 4

To handle the response in Json format, you can utilize the provided code snippet and customize it as needed:

var request = new XMLHttpRequest();

// Make a GET request to the specified JSON link
request.open('GET', 'http://api.fixer.io/latest');
request.onload = function () {
    var data = JSON.parse(request.responseText);
    console.log(data['date']);
    console.log(data.date); // Alternatively, this format can be used
    console.log(data['base']);
    console.log(data.base);
    console.log(data['rates']);
    console.log(data.rates);
    console.log(data['rates']['AUD']);
    console.log(data['rates'].AUD);
};

request.send();

When attempting to log an AJAX/JSON request, the console.log statement is displaying 'undefined'

Answer №1

Answer №2

Similar questions

Utilizing PHP Variables in Jquery Ajax Success Response

Add a preventDefault event listener to a submit button that triggers a specific function

Issue with Ionic Framework Typescript: `this` variables cannot be accessed from callback functions

Retrieve information from a MySQL database and integrate it into a different application

What is the best way to set up a property in a service that will be used by multiple components?

Creating a tool that produces numerous dynamic identifiers following a specific format

Mall magnitude miscalculation

Struggling with implementing a conditional template component within an AngularJS directive

Uncertain about troubleshooting the `uid: prismicDocument.uid ?? void 0` error on a Prismic and Next.js website?

Display the list items within a div only if the height is lower than a separate div

How can I incorporate a vertical line divider and a legend into a curved box using HTML and CSS?

Guide to showcasing console output on a Web Server

Failed to set Firebase data: The first argument provided contains an undefined property

Ways to Determine if the Content in the CKEditor has Been Altered

Creating a series of image files from CSS and Javascript animations using Selenium in Python

Refreshing web pages using AJAX

What advantages does $sce or Strict Contextual Escaping provide in AngularJS, and why is it unnecessary for React?

What strategies work best for managing jQuery ajax calls that run asynchronously?

The inner workings of GSON unraveled

I am struggling to set up angular-localstorage4