Chart.js、PHP 和 JSON 循环问题答案

【问题标题】：Chart.js, PHP and JSON loop issueChart.js、PHP 和 JSON 循环问题
【发布时间】：2018-02-25 16:21:36
【问题描述】：

我正在尝试创建一个仪表板来显示数据库中的一些数据。现在我正在使用一个名为“data.php”的单独的 JSON 编码文件。我正在使用对这些数据的 jQuery Ajax 请求来填充 Chart.js 图表。

目前我在 app.js 文件中遇到了一个问题：

$(document).ready(function(){
    $.ajax({
        url: "http://{redacted ip}/swordtest/data.php",
        method: "GET",
        success: function(data) {

            //var myData = $.parseJSON(data);
            console.log(data);
            var teamid = [];
            var teamName = [];
            var  ticketCount = [];

            for (var i in data) {
                teamid.push("ID " + data[i].id);
                teamName.push(data[i].name);
                ticketCount.push(data[i].count);
            }

            console.log(data);

            var chartData = {
                lables: teamName,
                datasets: [
                    {
                        label : 'Teams',
                        backgroundColor: 'rgba(200, 200, 200, 0.75)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 0.75, 1)',
                        hoverborderColor: 'rgba(200, 200, 200, 0.75, 1)',
                        data: ticketCount
                    }
                ] 
            };

            var ctx = $("#mycanvas");


            var myDoughnutChart = new Chart(ctx, {
                type: 'bar',
                data: chartData
            });

        }, 
        error: function(data) {
            console.log(data);
        }
    });
});

但发生的情况是，当我尝试循环遍历 JSON 对象以分隔 id、团队名称和门票数量时，它会不断循环遍历 id 并给我这个：

teamid = (1) ["ID undefined", "ID undefined"]

它还会添加一个并一直说未定义。当我在代码中放置断点时，它似乎也只循环通过 id。任何形式的帮助将不胜感激。谢谢！

更新值得一提的是，我从 data.php 获得的数据与我正在使用的示例（上面提到的链接）看起来有点不同。当我以这种格式打印数据时：

data = "{"playerid":"1","score":"10"},{  "playerid":"2","score":"40"},{ "playerid":"3","score":"20"},{  "playerid":"4","score":"9"},{  "playerid":"5","score":"20"}"

在示例中的位置：

[{"playerid":"1","score":"10"},{  "playerid":"2","score":"40"},{ "playerid":"3","score":"20"},{  "playerid":"4","score":"9"},{  "playerid":"5","score":"20"}]

带括号和不带括号的不同。我有一个朋友只是尝试取出双引号，用单引号替换它们并将整个 JSON 包裹在括号中。那时它似乎开始工作了。我猜这与 JSON 在我的 data.php 中的格式化方式有关。

【问题讨论】：

能否请您提供 data.php 的代码。我目前也在使用 Chartjs 创建一个仪表板，所以最近一直在使用它来达到这个目的。

标签： php jquery mysql json chart.js

【解决方案1】：

尝试将dataType 属性添加到作为ajax() 函数参数的对象字面量。当您从 PHP 获取 JSON 时，该属性的值应为 "json"。

$.ajax({
    url: "test.php",
    method: "GET",
    dataType: "json",
    success: function(data) {
         // ...
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log("AJAX ERROR",textStatus,errorThrown,jqXHR);
    }
});

我用这个 PHP 文件进行了测试。

test.php

<?php
  echo '[{"id":"1", "name":"John Doe", "count":"7"},{"id":"2", "name":"ABC", "count":"5"},{"id":"3", "name":"XYZ", "count":"29"}]';
?>

【讨论】：