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 pushed 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
– squill25, Commented Apr 29, 2015 at 0:29
@DominicSore It's not actually a loop though, it uses callback functions, which (I would think) are being called at a later time. — squill25
– squill25, Commented Apr 29, 2015 at 0:36
@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
– Alper Turan, Commented Apr 29, 2015 at 0: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.
– Oli Soproni B., Commented Apr 29, 2015 at 0:42

Community · Accepted Answer · 2017-05-23 11:50:47Z

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

Collectives™ on Stack Overflow

jQuery JSON to multi dimensional array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related