Array of JSON objects loaded from files

Question

I have a set of files a.json, b.json, c.json, etc., and I want to load the data contained therein to a single data structure in JavaScript. However, the last line of the following code always returns 0 instead of 3 which I expect. What am I doing wrong?

    files = ["a", "b", "c"];
    var dataset = [];

    function getObject(file) {
        return $.getJSON(file).then(function (data) {
            return data;
        });
    }


    for (i = 0; i < files.length; i++) {
        getObject(files[i] + ".json").done(function (data) {
            dataset.push(data);
        });
    }

    alert(dataset.length)

Look into asynchronicity and the concept of promises/deferred objects. You're alerting before the loads have completed because the load actions as asynchronous. The code does not pause to enact them. — Mitya
– Mitya, Commented May 9, 2014 at 18:42

Community · Accepted Answer · 2017-05-23 11:57:35Z

1

First, if run your alert immediately after the calls to $.ajax return, the data isn't available and your variable hasn't been set. You have to wait until done is called (which is long after the method call to $.ajax returns, since it's asynchronous). How do I return the response from an asynchronous call?

Second, to synchronize requests, you can use $.when so you're notified when all requests resolve. Wait until all jQuery Ajax requests are done?

var files = ["a", "b", "c"];
var dataset = [];
var requests = [];

for (i = 0; i < files.length; i++) {
    requests.push($.getJSON(files[i] + ".json") );
}

// $.when may not take the requests as an array, in that case use
// $.when.apply($, requests).done();
$.when(requests).done(function() {
    for (var i=0; i < arguments.length; i++) {
        dataset.push(arguments[i]);
    }
    alert('All three received, dataset length is ' + dataset.length)
})

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered May 9, 2014 at 18:52

Ruan Mendes

92.7k31 gold badges162 silver badges225 bronze badges

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

Comments

Ruan Mendes · Accepted Answer · 2014-05-09 21:26:20Z

1

You could handle it in the done method:

var doneCount = 0;
for (i = 0; i < files.length; i++) {
    getObject(files[i] + ".json").done(function (data) {
        dataset.push(data);
        if ( ++doneCount  == files.length ){
           alert(dataset.length);
        }
    });

}

edited May 9, 2014 at 21:26

Ruan Mendes

92.7k31 gold badges162 silver badges225 bronze badges

answered May 9, 2014 at 18:43

T McKeown

12.9k1 gold badge27 silver badges35 bronze badges

Collectives™ on Stack Overflow

Array of JSON objects loaded from files

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related