How can I pass data read from a JSON file to the rest of my Javascript code?

Question

I'm new in the scripting and web world and have been trying to work through an issue I've been having. I am reading data from a local JSON file, and have been able to use jQuery.getJSON and jQuery.parseJSON successfully, but I am trying to use the data outside of the getJSON callback function and am having issues. I think it comes down to me not fully understanding the correct way to do this, and that's where I'm looking for your help. Here's my code:

var names = new Array();

$.getJSON('ferries.json', function(data) {
  var jsondata = $.parseJSON(JSON.stringify(data));

  var length = jsondata.nodes.length;
  for (var i = 0; i < length; i++) {
    names[i] = String(jsondata.nodes[i].name);
  }
});

console.log('Names: ' + names[0]);

The final line returns undefined. If I were to write that line right after the for loop, it would return the desired value. Here's how the JSON file is structured:

{
  "nodes":[
    {
      "name":"John"
    },

    ...

    {
      "name":"Joe"
    }
  ]
}

Any help would be appreciated - thanks!

Edit: One last thing, it seems that the final line (console.log(...)) executes before the $.getJSON bit, which confuses me as well.

To get names array try this names.push(jsondata.nodes[i].name); — ankitpatel
– ankitpatel, Commented Jun 8, 2013 at 5:05

FishBasketGordo · Accepted Answer · 2013-06-08 05:18:58Z

1

$.getJSON runs asynchronously. The function that you pass to it is a "callback", which means that it gets called when getJSON comes back from doing its thing.

If you want to do something with the JSON data that you get back, you must wait for the callback to execute.

Also, on a side note, $.parseJSON(JSON.stringify(data)) is redundant. The data object is already a perfectly usable object with your data in it, but you're turning that object back into a JSON string and then immediately back into an object. Just use data as is. For more information, check out the jQuery API docs for getJSON.

edited Jun 8, 2013 at 5:18

answered Jun 8, 2013 at 5:08

FishBasketGordo

23.2k4 gold badges60 silver badges92 bronze badges

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

2 Comments

Donald Over a year ago

Thanks for the side note - that makes a lot of sense when you explain it like that. As for waiting for the callback to execute, how can I achieve that in code?

FishBasketGordo Over a year ago

You're already waiting on getJSON to execute the callback to set the values in the names array. Whatever else you need to do, do it within the callback or call another function for the callback to do it. For more complex scenarios, read up on jQuery's Deferred object. The doc page for getJSON mentions it.

Collectives™ on Stack Overflow

How can I pass data read from a JSON file to the rest of my Javascript code?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related