How do I convert a JSON file to a JS array?

Question

I have an API key from Forecast.io that gives me the JSON output found in the file here. I would like to create a plot of some of the data included (e.g. the variation of temperature over a period of time). Once I get the data into a JavaScript array, I plan on using the Google Charts API to create the chart, but I'm struggling to figure out what the best way to efficiently convert the JSON data to a JavaScript array.

Looking around on various forums, several places reference that they are using jQuery. Is that a necessity? If so, can you point me toward a good tutorial for getting that setup?

P.S. If you can't tell, I'm very much a newbie at this, so please excuse my very rudimentary knowledge of what I'm doing.

This may be a possible duplicate of this question: http://stackoverflow.com/questions/16896219/how-can-i-convert-json-string-to-google-visualization-datatable — jithinpt, Apr 30 '15 at 21:26

carlosHT · Accepted Answer · 2015-04-30T23:37:19.140

You could assign the JSON directly to a variable, without the need of an array:

var json_object = your_raw_json;

Then you could use the json object to populate the rows on the chart. Here is an example that uses the "ApparentTempMax" from the JSON you provided:

google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBasic);

function drawBasic() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Day');
    data.addColumn('number', 'ApparentTempMax');

    //WHERE THE DATA IS BEING SET: START

    var rows = new Array;

    var daily_weather_data = json_object.daily.data;
    for(var i=0; i<daily_weather_data.length; i++){
        var day_data = daily_weather_data[i];
        rows.push([i, day_data.apparentTemperatureMax]);
    }

    /*
     At this point rows will look like this:
     [
        [0, 74.24], [1, 68.1], [2, 77.03], [3, 77.68],
        [4, 78.5], [5, 80.36], [6, 87.44], [7, 89.94]
     ]
    */

    data.addRows(rows);

    //WHERE THE DATA IS BEING SET: END

    var options = {
       hAxis: {
          title: 'Day'
       },
       vAxis: {
         title: 'ApparentTempMax'
       }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    chart.draw(data, options);
}

FUNCTIONING EXAMPLE: https://jsfiddle.net/6qpf7tek/2/

maioman · Answer 2 · 2015-04-30T22:50:31.230

-1

definition of JSON:

JSON is similar to JavaScript’s way of writing arrays and objects, with a few restrictions. All property names have to be surrounded by double quotes, and only simple data expressions are allowed—no function calls, variables, or anything that involves actual computation. Comments are not allowed in JSON.

here's an excellent learning ref.

In JS to get data from and to JSON you have two specific methods JSON.stringify() and JSON.parse()

Your first step would then be to parse the Json data

var forecast = JSON.parse(YOUR_FILE)

Then from here you can achieve anything with methods and functions, I suggest you stick with JS because that's how your object is stored (or jquery);

edited Apr 30 '15 at 22:50

answered Apr 30 '15 at 21:51

maioman

18,154
4
36
42

Don't forget to add a [ before and a ] after the data since it is an Array. Otherwise the parse will probably fail. – MiltoxBeyond Apr 30 '15 at 22:20
actually I tried parsing this json in local file.. but the output looks correct , where would you put the square brackets? – maioman Apr 30 '15 at 22:47
I know how JSONs work and how to get them into the JavaScript. I'm mainly asking about whether there is a more efficient means to collect all the entries for a specific key into an array. – tlewis3348 May 01 '15 at 00:35
To be clear, I know how to get the data into my script, but I'm not sure what to do with it once it's there. – tlewis3348 May 01 '15 at 00:37

How do I convert a JSON file to a JS array?

2 Answers2