Question

我有一个来自Forecast.io的API密钥，它为我提供了文件here中的JSON输出。我想创建一些包含的数据的图（例如，一段时间内的温度变化）。一旦我将数据导入JavaScript数组，我计划使用Google Charts API来创建图表，但我正在努力找出将JSON数据有效转换为JavaScript数组的最佳方法。

在各种论坛上查看，有几个地方提到他们正在使用jQuery。这是必要的吗？如果是这样，你能指点我做一个很好的教程来获得这个设置吗？

P.S。如果你不能告诉我，我非常喜欢这个新手，所以请原谅我对我所做的非常基本的了解。

Answer 1

您可以将JSON直接分配给变量，而无需数组：

var json_object = your_raw_json;

然后，您可以使用json对象填充图表上的行。下面是一个使用您提供的JSON中的“ApparentTempMax”的示例：

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);
}

功能示例： https://jsfiddle.net/6qpf7tek/2/

Answer 2

JSON的定义：

JSON类似于JavaScript编写数组和对象的方式，但有一些限制。所有属性名称都必须用双引号括起来，并且只允许使用简单的数据表达式 - 没有函数调用，变量或任何涉及实际计算的内容。 JSON中不允许发表评论。

here's an excellent learning ref.

在JS中从JSON获取数据和向JSON提供数据，你有两个特定的方法JSON.stringify（）和JSON.parse()

然后您的第一步是解析Json数据

var forecast = JSON.parse(YOUR_FILE)

然后从这里你可以用方法和函数实现任何东西，我建议你坚持使用JS，因为这是你的对象存储方式（或jquery）;

如何将JSON文件转换为JS数组？

2 个答案: