Question

I want to take an external json file (locations.json) and load the contents into a variable. I would then like to use this variable using the information provided here: http://www.json.org/js.html

I’ve had a lot of trouble trying to load the external json to a variable. I’ve looked at this ( load json into variable ) page quite a bit, and none of that actually populates the variable. When displaying the variable’s contents later, it appears to be empty.

$("#testContain").html("<p>" + json + "</p>");

Using methods listed in the last link, this dispays “undefined”.

The json file that I am using looks like this:

[{"id":"1","locname":"Dunstable Downs","lat":"51.8646","lng":"-0.536957","address":"Chiltern Gateway Centre","address2":"","city":"","state":"England","postal":"","phone":"","web":"http:\/\/www.nationaltrust.org.uk\/main\/w-dunstabledownscountrysidecentrewhipsnadeestate","hours1":"","hours2":"","hours3":""},
{"id":"2","locname":"West Delta Park","lat":"45.5974","lng":"-122.688","address":"N Broadacre St and N Expo Rd, Portland","address2":"","city":"","state":"OR","postal":"","phone":"","web":"http:\/\/en.wikipedia.org\/wiki\/Delta_Park","hours1":"","hours2":"","hours3":""}]

Anyone have any suggestions?

Answer 1

The problem is that the request is asynchronous. You could make a synchronous call as suggested by the accepted answer to the question that you linked to, but that is generally not a good idea as it will freeze the browser completely while it is waiting for the response.

The variable is assigned just fine, but when you use it after requesting it, you have to make sure that it’s after getting the response, not just after sending the request. Using the value in the callback for the getJSON method is the easiest way to make sure that you have the value:

var my_json;
$.getJSON(my_url, function(json) {
  my_json = json;
  // here you have the value
});
// here you don't have the value, as this happens before the response arrives