Jane WIlkie Jane WIlkie - 4 months ago 24
JSON Question

Loading JSON into variable via getJSON

I have the following code that works great. The var data as you can see is hard coded.

$(function() {
var data = [{
"day": "06/19/2016",
"region": "Ohio",
"daily_er": "98.61"
}, {
"day": "06/19/2016",
"region": "Western NE",
"daily_er": "98.63"
}, {
"day": "07/19/2016",
"region": "Ohio",
"daily_er": "68.61"
}, {
"day": "07/19/2016",
"region": "Western NE",
"daily_er": "32.63"
}, {
"day": "08/19/2016",
"region": "Ohio",
"daily_er": "98.61"
}, {
"day": "08/19/2016",
"region": "Western NE",
"daily_er": "48.63"
}]

var exist, index, options = {
xAxis: {
categories: []
},
series: []
}
Highcharts.each(data, function(p, i) {
exist = false;
if (options.xAxis.categories.indexOf(p.day) < 0) {
options.xAxis.categories.push(p.day)
}
Highcharts.each(options.series, function(s, j) {
if (s.name === p.region) {
exist = true;
index = j;
}
});
if (exist) {
options.series[index].data.push(parseFloat(p.daily_er))
} else {
options.series.push({
name: p.region,
data: [parseFloat(p.daily_er)]
})
}
})
$('#container').highcharts(options);
});


Instead of hard coding, I need to pull the JSON via .getJSON (or .ajax ). I tried the following and it didn't work ( which is to say that the chart label showed up but the data didn't ). Can someone point me in the right direction on how I load this JSON?

$(function() {

var data;
$.getJSON("data.json", function(json){
data = json;
})

var exist, index, options = {
xAxis: {
categories: []
},
series: []
}
.....
.....
.....


NOTE: MANY Thanks to everyone! I chose an answer, but all of your answers were insightful.You all have saved me a lot of trouble.....JW

Answer

getJSON is a shortcut for:

$.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: success
});

The code that is using the json may be executing before you actually get the json becuase ajax works asynchronously, it means that the lines below $.getJSON gets executed before the call end. anything you want to do with the result of the $.getJSOn call should be done inside the callback of the $.getJSON like this:

$.getJSON( "data.json", function( response) { //be sure that data.json is a valid url
      var exist, index, options = {
                                      xAxis: {
                                              categories: []
                                            },
                                     series: []
                                 }
      .....
      .....
      .....
});

you can look into this page for a detailed explanation of $.getJSON: http://api.jquery.com/jquery.getjson/

If this was helpful please mark the answer as correct.

Comments