php - Chart.js、PHP 和 JSON 循环问题

Question

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

我也一直在关注an example similar to this

目前，我在 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"}]

带括号和不带括号是不同的。我有一个 friend 尝试去掉双引号，用单引号替换它们，然后将整个 JSON 括在括号中。似乎从那时起就开始起作用了。我猜这与我的 data.php 中 JSON 的格式化方式有关。

Answer 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 文件进行了测试。

测试.php

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