jQuery JSON to multi dimensional array

Question

So I have a jQuery .getJson which is as so:

var tournamentdata = [];

$.getJSON( "http://tourn.dev/data/tournaments", function( data ) {

  $.each(data, function(i) {

     var tempdata = [];

     $.each(this, function(k, v) {
        tempdata.push(v);
     });

     tournamentdata.push(tempdata);

  });

});

console.log(tournamentdata);

The JSON request returns:

[
    {
        "id":1,
        "name":"one",
        "max_users":100,
        "registered_users":0,
        "prize_pool":1000,
        "entry_fee":10,
        "published":0,
        "registration_open_date":"0000-00-00 00:00:00",
        "registration_close_date":"0000-00-00 00:00:00"
        ,"start_date":"0000-00-00 00:00:00",
        "created_at":"2015-04-28 20:35:23",
        "updated_at":"2015-04-28 20:35:23"
    },
    {
        "id":2,
        "name":"Two",
        "max_users":1000,
        "registered_users":0,
        "prize_pool":10000,
        "entry_fee":100,"published":0,
        "registration_open_date":"0000-00-00 00:00:00",
        "registration_close_date":"0000-00-00 00:00:00",
        "start_date":"0000-00-00 00:00:00",
        "created_at":"2015-04-28 20:37:16",
        "updated_at":"2015-04-28 20:37:16"
    }
]

Now, when I check my console log in firefox the tournamentdata is an array of two arrays 'Array [ Array[12], Array[12] ]'.

However, when I try access the multi-array through something like:

alert(tournamentdata[0][0]);

it returns undefined.

`tournamentdata` is logged before the `getJSON` callback, so before it is `push`ed tempdata, and you push `v` to `tempdata` also in a callback, so `tournamentdata.push(tempdata)` is called before any data is actually added to `tempdata` — squill25, Apr 29 '15 at 00:29
It [doesn't return](http://jsfiddle.net/xk7eutp1/) `undefined` to me. — Alper Turan, Apr 29 '15 at 00:34
@DominicSore It's not actually a loop though, it uses callback functions, which (I would think) are being called at a later time. — squill25, Apr 29 '15 at 00:36
@AlperTuran It is returning an object, which I still can't reference. — Dominic Sore, Apr 29 '15 at 00:37
Try replacing all `$.each` with actual `for` loops and seeing if that solves the problem — squill25, Apr 29 '15 at 00:38
@Ignaus What you know. His console log output returned the right thing and I based myself on that. He initialized it with an empty array so the right output must've come from somewhere. I think this code is flawed, like it is your suggestion. — Alper Turan, Apr 29 '15 at 00:42
alert(tournamentdata[0]); would return the first array, but alert(tournamentdata[0]['key_name']); would return value of the key_name — Oli Soproni B., Apr 29 '15 at 00:42
@AlperTuran It most definitely is. [Here](http://jsfiddle.net/v41tbzpz/2) I run his code replacing just the `getJSON` call with the data and it seems to work... — squill25, Apr 29 '15 at 00:50
@Ignaus your suggestion works for me too, so I can't understand why it doesn't seem to work with the getJSON method. — Dominic Sore, Apr 29 '15 at 01:11

score 1 · Accepted Answer · edited May 23 '17 at 11:50

WHat you are seeing in the console is the live reference of the array and it looks right....but it is not a snapshot , it will get changed as array gets changed

However try stringifying it in the code in question and all you will see is the empty array. Why? Because the ajax hasn't completed at the time you are trying to access the data.

The live reference looks right because the console isn't showing exaclty what array looked like at the time it was logged, it will show all subsequent changes also ...due to prototypical inheritance

You can see it in this demo code:

var tournamentdata = [];

$.getJSON("data.json", function(data) {

  $.each(data, function(i) {
    var tempdata = [];
    $.each(this, function(k, v) {
      tempdata.push(v);
    });
    console.log('Push data now'); //fires after the one below
    tournamentdata.push(tempdata);

  });

});
//this log is empty array and fires before the above logs
console.log('Log outside getJSON', JSON.stringify(tournamentdata));

Conclusion: If you want to access the arrays and parse to DOM it has to be done in the $.getJSON callback...the first A in ajax stands for asynchronous

For a really good explanation and must read for anyone working with ajax see: How to return the response from an asynchronous call? .

DEMO

jQuery JSON to multi dimensional array

1 Answers1