Question

我正在尝试使用简单的$ .ajax GET从API检索数据，并将其绑定到Google Charts。我的API返回此数据：

这是Google documentation用于在页面内声明数据表的格式。但是，从下载的数据创建表时，控制台显示：

错误：不是数组

目前的代码是：

function LoadJsonData() {
    $.ajax({
        type: 'GET',
        url: '/api/Test',
        dataType: "json",
        success: function (data) {
            var dt0 = new google.visualization.arrayToDataTable(data, false);
            var chart0 = new google.visualization.PieChart(document.getElementById('ContentPlaceHolderBody_ctl02'));
            var options0 = { title: 'Some title', width: 400, height: 300 };
            chart0.draw(dt0, options0);
        }
    });
}

google.charts.load('current', { packages: ['corechart', 'table'] });
google.charts.setOnLoadCallback(LoadJsonData);

Answer 1

google.visualization.arrayToDataTable接受一组数组 []：

来自the docs

var data = google.visualization.arrayToDataTable([
       ['Employee Name', 'Salary'],
       ['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
       ['Bob', 35000],
       ['Alice', 44000],
       ['Frank', 27000],
       ['Floyd', 92000],
       ['Fritz', 18500]
      ],
      false); // 'false' means that the first row contains labels, not data.

您的json / js对象与上面的格式不同，它是对象的数组 {}

[{},{}...etc.]

将 json 重新格式化为正确的格式。有点像：

[["FirstName", "count"],
["Bob", "60"],
["Wendy", "4"]]

注意：第一个数组（["FirstName", "count"]）包含标签。以下数组包含数据。这将更容易做服务器端。如果您想在客户端进行，请阅读Access / process (nested) objects, arrays or JSON

Answer 2

第一行{"FirstName":"Bob", "Count" : 34}是JSON对象而不是数组。

您尝试JSON.parse成功函数中的数据将尝试解析整个数据对象。

您要解析每个项目，请尝试以下

success: function (data) {
         $.each(data, function(i, value){
              var dt0 = new google.visualization.arrayToDataTable(JSON.parse(value));
              var chart0 = new google.visualization.PieChart(document.getElementById('ContentPlaceHolderBody_ctl02'));
             var options0 = { title: 'Some title', width: 400, height: 300 };
             chart0.draw(dt0, options0);
          }
    },

Google Visualization错误; “不是数组”

2 个答案: