Import and use contents of .json file

Question

I wanted to get some data from a .json file and use it in another js file.through tutorial i understood that u need to use a ajax function to call the .json file.I used the following function to that however the alert(results) doesnt show any value.can somone plss help???

var results;
var data;
function ajax_get_json() {

    var hr = new XMLHttpRequest();
    hr.open("GET", "Test2.json", true);
    hr.setRequestHeader("Content-type", "application/json", true);
    hr.onreadystatechange = function() {
        if (hr.readyState == 4 && hr.status == 200) {
            var data = JSON.parse(hr.responseText);
            //results=document.getElementById("results");                              
            //results.innerHTML=data.user + " " +data.country;
            results = data.user;

        }
    }

    hr.send(null);

    //results.innerHTML = "requesting...";
    }
ajax_get_json()
    alert(results);

Answer 1

Because the AJAX request is asynchronous, the browser doesn't wait for it to complete before carrying on executing other code. So alert is called before the request has completed.

Make your function reusable, allowing you to request any file, and pass in a callback function to be executed on completion:

function ajax_get_json(file, callback) {

    var hr = new XMLHttpRequest();
    hr.open("GET", file, true);
    hr.onreadystatechange = function() {
        var data, results;
        if(hr.readyState == 4 && hr.status == 200) {
            data=JSON.parse(hr.responseText);
            results=data.user;
            callback(results);
        }
    }

    hr.send(null);

}

// request a file and do something with the contents when complete
ajax_get_json("Test2.json", function(results) {
    alert(results);
});

// request a different file and do something else with the contents
ajax_get_json("Test3.json", function(results) {
    console.log(results);
});

EDIT

Just seen in another comment that you want to use the results in a different file.

Include the ajax_get_json function in some kind of helpers.js file, and then you can call ajax_get_json in your other JS files.

Or, if you really need to use the same results across different scripts, you'll have to store the results in window:

ajax_get_json("Test2.json", function(results) {
    alert(results);
    window.resultsCache = results;
    // window.resultsCache now available to all scripts on the page
});

Answer 2

Your alert is executed before the AJAX onreadystatechange callback.

Try to move it right after the results=data.user; line, inside the callback.

Answer 3

AJAX is Asynchronous. So by the time your AJAX request is done, your alert has already been called. You need to place the alert inside the AJAX function:

var results;
var data;

function ajax_get_json() {
    var hr = new XMLHttpRequest();
    hr.open("GET", "Test2.json", true);
    hr.setRequestHeader("Content-type", "application/json", true);
    hr.onreadystatechange = function () {
        if (hr.readyState == 4 && hr.status == 200) {
            var data = JSON.parse(hr.responseText);
            //results=document.getElementById("results");                               
            //results.innerHTML=data.user + " " +data.country;
            results = data.user;
            alert(results);
        }
    }
    hr.send(null);
    //results.innerHTML = "requesting...";
}
ajax_get_json()

Answer 4

What is happening is this. You declare data and results, Make your ajax call, create an alert, your ajax call returns. As the alert is created before the ajax call completes your alert box shows nothing.

Ajax calls are done asynchronously, so you would need to move the alert in to your callback

var results;
var data;
function ajax_get_json(){

   var hr = new XMLHttpRequest();
   hr.open("GET", "Test2.json", true);
   hr.setRequestHeader("Content-type", "application/json",true);
   hr.onreadystatechange = function() {
       if(hr.readyState == 4 && hr.status == 200) {
           var data=JSON.parse(hr.responseText);
           alert(data.user);

       }
  }
  hr.send(null);
}
ajax_get_json()

Answer 5

To get Json i have used ajax call and it worked. here is a sample

$.ajax({
    url: "sample.json",
    dataType: 'json',
    contentType:"application/json",
    success: function(response) {
        //here you can use the response
            //response can be passed to what ever js file you need.

    },
    error: function(response1){
            alert('response error')
    }
});

here sample.json is a local file instead you can use the url where the json is present

I hope this will help you