Reading JSON file into global array of objects - scope and sync issues

Question

I am trying to read a JSON file into a global array of objects. The code works except I cannot seem to find a way to get the data out of the Ajax $.getJSON call into the global variable. Maybe this is because of scope and or synchronisation.

I have tried a few approaches and I am using the following code to read in a JSON file (See Using Jquery to get JSON objects from local file):

var questions = {};

$(document).ready(function() {

    readJsonFile().done(function (questions) {
        // This outputs the array of objects (questions) OK ->
        console.log("Questions read from JSON file: " + questions);
    });

    // Cannot read from the array here
    console.log("Question 1: " + questions[0].question);

...

function readJsonFile() {
    return $.getJSON("questions.json").then(function (data) {
        // This was in the original post and didn't seem to return the array
        // return data.items;
        return data;
    });
};

Tibos · Accepted Answer · 2013-09-27 09:09:33Z

1

The first console log outputs the parameter of the callback. The second outputs the global object. There is no connection between them other than the fact that they are similarly named. You should do something like this:

 readJsonFile().done(function (data) {
        questions = data; // <- assigned the return data to the global object
        // This outputs the array of objects (questions) OK ->
        console.log("Questions read from JSON file: " + questions);
    });

answered Sep 27, 2013 at 9:09

Tibos

27.9k4 gold badges56 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pcrx20 Over a year ago

Thanks. But I still get 'Cannot read property 'question' when outputting questions[0].question outside of the call to readJsonFile. Also in the console window this error appears before the Ajax call completes. Is this due to async loading?

Tibos Over a year ago

Yes. The second console log is executed immediately after the the Ajax call is made, before the response returns, so before the callback is executed.

pcrx20 Over a year ago

The solution I realised is to use a call to $.ajax() and ensure async: false is set.

pcrx20 · Accepted Answer · 2013-09-28 09:57:55Z

0

Ok. I worked out how to do this... To load the JSON file synchronously use the following code:

function readJsonFile() {
    $.ajax({
        type: 'GET',
        url: 'questions.json',
        dataType: 'json',
        success: function(data) {
            questions = data;
        },
        async: false
    });
};

After a call to this function, my global variable 'questions' is accessible since the callback waits until the response is completed. Clearly you would want to do some error checking if Ajax call was not successful.

answered Sep 28, 2013 at 9:57

pcrx20

1131 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

Reading JSON file into global array of objects - scope and sync issues

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related