Question

我使用json将数据动态加载到Google Chart中，图表看起来不错，但我想读取json以便使用这些值来创建一个带有json值的表。

我用以下内容阅读数据：

var formData = {type:"All"};
var jsonDataAll = $.ajax({
    type: "POST",
    data : formData,        
    url: "./content/chartsData.php",
    dataType:"json",
    async: false
}).responseText;

这是回复：

{
     "cols": [
        {"id":"","label":"Level","pattern":"","type":"string"},
        {"id":"","label":"Number","pattern":"","type":"number"}
      ],
      "rows": [
        {"c":[{"v":"Preschool","f":null},{"v":8,"f":null}]},
        {"c":[{"v":"Kindergarten","f":null},{"v":23,"f":null}]},
        {"c":[{"v":"Elementary","f":null},{"v":32,"f":null}]},
        {"c":[{"v":"Junior","f":null},{"v":31,"f":null}]},
      ]
}

如何获取值？

Preschool - 8
Kindergarten - 23
Elementary - 32
Junior - 31

有什么想法吗？

Answer 1

以下是我对问题的看法。 http://jsfiddle.net/7uLk3ktn/

考虑到您可用的JSON数据，这里是我用于提取数据的（jQuery）代码。

<h1> School data </h1>
<ul id="data">
</ul>

var json_rows = json.rows;
 $.each(json_rows, function(index, value) {
      console.log(json_rows[index].c[1].v);
      var school_name = json_rows[index].c[0].v;
      var school_value = json_rows[index].c[1].v;
      $('ul#data').append('<li>'+ school_name + ' - ' + school_value + '</li>');
 });

Answer 2

也许这样的事情可能会让你开始：

var data = '["Level","Number"]';

for(var i=0; i < obj["rows"].length; i++){
    data += ",[" + obj["rows"][i]["c"][0]["v"] +","+ obj["rows"][i]["c"][1]["v"] + "]";
}

然后可以将数据变量传递到图表部分中所需的位置。我让this fiddle弄乱了格式化。

我肯定会建议您查看Google Chart documentation。

Answer 3

您只需要将JSON解析为对象，然后遍历存储在表示中的列和行数据以获取所需的数据。这可能看起来像这样：

var obj = JSON.parse(jsonDataAll);
// get column labels
var columns = [];
for(i=0; i<=obj.cols.length; i++) {
    columns .push(obj.cols[i].label);
}
console.log(columns); // ['Level','Number']
// get row data
var rows = [];
for(i=0; i<=obj.rows.length; i++) {
    var row = [];
    for(j=0;j<=labels.length;j++) {
        row.push(obj.rows[i].c[j].v);
    }
    rows.push(row); 
}
console.log(rows); // [['Preschool',8],['Kindergarten',23],['Elementary',32],['Junior',31]]

从Google Charts中解析Json

3 个答案: