Loading JSON into variable via getJSON

Question

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

Getting the JSON is an asynchronous operation. You need to put all the code that uses the JSON inside the getJSON callback. — gcampbell
– gcampbell, Commented Jul 6, 2016 at 17:03

Franklin Rivero · Accepted Answer · 2016-07-06 17:12:03Z

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.

Dylan Wright · Accepted Answer · 2016-07-06 17:06:35Z

1

Have you tried using the JSON.stringify or JSON.parse methods. Using your code you would do something like so: JSON.stringify(data); which will convert your JSON to a string, and to parse it back JSON.parse(data);

Maybe this will as well: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

answered Jul 6, 2016 at 17:06

Dylan Wright

1,22213 silver badges21 bronze badges

Comments

Henry Williams · Accepted Answer · 2016-07-06 17:12:30Z

1

$.getJSON() is asynchronous, so you need to place your logic inside the callback. Currently you're trying to use the value of data before you have it.

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

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

    ...
})

answered Jul 6, 2016 at 17:12

Henry Williams

3491 silver badge10 bronze badges

Collectives™ on Stack Overflow

Loading JSON into variable via getJSON

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related