Save information in JSON format inside a variable using pure JavaScript

Question

Save information in JSON format inside a variable using pure JavaScript

I'm having trouble retrieving data from a JSON file using JavaScript. The console is showing the result as undefined.

The GET request seems to be successful and the function is executing, but I'm unable to access the response data.

function fetchDataFromJSON(url) {
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.setRequestHeader("Content-type", "application/json");

    request.onreadystatechange = function() {
        if(request.readyState == 4 && request.status == 200){
            return JSON.parse(request.responseText);
        }
    };

    request.send();
}

var jsonData = fetchDataFromJSON('questions.json');

console.log(jsonData); //undefined

http://codepen.io/gsg/pen/LEEeMg

javascript json

Answer 1

Answer №1

Keep in mind the nature of this function—it operates asynchronously. Consider implementing a callback approach for potentially better results.

function AJAX_JSON_Req(url, cb) {
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.setRequestHeader("Content-type", "application/json");

    request.onreadystatechange = function() {
        if(request.readyState == 4 && request.status == 200){
            cb(JSON.parse(request.responseText));
        }
    };

    request.send();
}

AJAX_JSON_Req('questions.json', function (q) {
  console.log(q);
});

Answer 2

Keep in mind the nature of this function—it operates asynchronously. Consider implementing a callback approach for potentially better results.

function AJAX_JSON_Req(url, cb) {
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.setRequestHeader("Content-type", "application/json");

    request.onreadystatechange = function() {
        if(request.readyState == 4 && request.status == 200){
            cb(JSON.parse(request.responseText));
        }
    };

    request.send();
}

AJAX_JSON_Req('questions.json', function (q) {
  console.log(q);
});

Answer 3

Answer №2

AJAX is short for Asynchronous JavaScript and XML.

This means that the data is not available immediately when your function completes.

onreadystatechange serves as an event listener, functioning as a non-standard variation of:

AJAX_request.addEventListener("readystatechange", function () {
    // state has changed
});

An easy solution would be to utilize a callback, like so:

AJAX_JSON_Request("questions.json", function (response) {
    console.log(response);
});

Then you can have:

AJAX_request.addEventListener("readystatechange", function () {
    // check if state == 4
    callback(JSON.parse(AJAX_request.responseText));
});

One common method for handling asynchronous operations is through the use of Promises, which helps in avoiding the chaos of nested callbacks.

This leads to something along these lines:

AJAX_JSON_Request("questions.json").done(function (response) {
    console.log(response);
});

Promises are not inherently supported yet; however, you can create your own implementation or rely on established frameworks.

Now,

AJAX_JSON_Request("questions.json")

generates something: a Promise. The value may not be accessible instantly, but the promise ensures that you will receive it eventually.

Answer 4

AJAX is short for Asynchronous JavaScript and XML.

This means that the data is not available immediately when your function completes.

onreadystatechange serves as an event listener, functioning as a non-standard variation of:

AJAX_request.addEventListener("readystatechange", function () {
    // state has changed
});

An easy solution would be to utilize a callback, like so:

AJAX_JSON_Request("questions.json", function (response) {
    console.log(response);
});

Then you can have:

AJAX_request.addEventListener("readystatechange", function () {
    // check if state == 4
    callback(JSON.parse(AJAX_request.responseText));
});

One common method for handling asynchronous operations is through the use of Promises, which helps in avoiding the chaos of nested callbacks.

This leads to something along these lines:

AJAX_JSON_Request("questions.json").done(function (response) {
    console.log(response);
});

Promises are not inherently supported yet; however, you can create your own implementation or rely on established frameworks.

Now,

AJAX_JSON_Request("questions.json")

generates something: a Promise. The value may not be accessible instantly, but the promise ensures that you will receive it eventually.

Save information in JSON format inside a variable using pure JavaScript

Answer №1

Answer №2

Similar questions

Adjust the styling with jQuery according to the selected value from the dropdown menu

Setting a global variable in the JavaScript code below

Learn the process of retrieving a file from server.js and showcasing it on an HTML page

Displaying the scope in HTML from a custom Angular directive: A step-by-step guide

Converting JavaScript array within a JSON string into a Golang map

Transmit information from javascript to the server

Euler 13: Surprising outcome when attempting to combine several String variables

Creating a blank grid using ng-repeat in angularJS

What is the best way to manipulate the positioning and rotation of the main object?

Scrolling with Jquery window.scrollTo results in the page becoming unresponsive

No options displayed in AngularJS select2 dropdown

What is the most effective method for transferring an error message from the server backend to the vue frontend?

Troubleshooting alignment problems with a responsive gallery (Bootstrap-gallery & justifyGallery)

Attempting to extract the text within a table row cell by clicking on the cell directly following it

Detecting when the user exits AR mode in A-Frame

CSS - Achieving full width on hover even when the element has a specified width setting

Module request: How can I save the gathered cookies as a variable?

Comparing ID numbers and adding them together before storing them in a new array

Sending documents to a printer directly from a Rails application

Adding elements to a JSON array in Javascript