在全局变量上使用$ .getJSON似乎不起作用

Question

I'm extremely new to Javascript and jQuery and I'm not quite understanding why the following code doesn't work

var collectibleCards = [];

$(document).ready(function () {
    $.getJSON('AllSets.json', function (json) {
        $.each(json, function(sets, cards) {
            $.each(cards, function(element, card) {
                if(card['collectible'] && card['type'] !== "Hero") {
                    collectibleCards.push(new Card(card));
                }
            });
        });
    });
});

console.log(collectibleCards.length); // prints 0

Why does collectibleCards not get any elements added? I've even tried just pushing numbers and still get nothing added to the array.

Answer 1

It's because getJSON is async operation and result of the callback will appear after some time, when browser get response from the server (or, in your case, from a json file). So lets see:

// You create a variable
var collectibleCards = [];

// You start your ajax request by doing getJSON
$.getJson('AllSets.json', function () { // This code will evaluate AFTER browser get response from the file });

// You logged your variable and it still an emtpy array because ajax doesn't get a response yet
console.log(collectibleCards.length); // prints 0

Answer 2

You are trying to access the variable before its getting updated in success callback of getJSON, thats why you are getting it of length 0, If you want to access it outside of callback then use $.ajax and make it synchronous call else manipulate on collectibleCards in callback function itself not outside.

var collectibleCards = [];

$(document).ready(function () {
    $.getJSON('AllSets.json', function (json) {
        $.each(json, function(sets, cards) {
            $.each(cards, function(element, card) {
                if(card['collectible'] && card['type'] !== "Hero") {
                    collectibleCards.push(new Card(card));
                }
            });
        });
       console.log(collectibleCards.length); // print correct length
    });
});

Also see Calling Ajax and returning response