JSON 到 JavaScript 变量通过 AJAX 和 PHP MYSQL => Array undefined

Question

我正在尝试通过 php -> json -> ajax 将 mysql 数据获取到 Chartjs 的 JS 变量中。 php 生成的 JSON 看起来完全没有问题。不幸的是，当试图在我的变量中获取数据时，控制台将它们返回为未定义。

这是我的代码：

<?php

$con=mysqli_connect("---");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT clanarina, vakufnama, zekjat, year from payments where uid = 1");


$data = array();
foreach ($result as $row) {
  $data[] = $row;
}
$result->close();
mysqli_close($con);
print json_encode($data);
?>

JSON：

    [{"clanarina":"240","vakufnama":"12500","zekjat":"0","year":"2019"},{"clanarina":"240","vakufnama":"0","zekjat":"0","year":"2021"},{"clanarina":"240","vakufnama":"0","zekjat":"0","year":"2022"},{"clanarina":"240","vakufnama":"0","zekjat":"0","year":"2023"},{"clanarina":"240","vakufnama":"0","zekjat":"0","year":"2024"},{"clanarina":"240","vakufnama":"0","zekjat":"0","year":"2025"}]

JS：

$(document).ready(function(){
  $.ajax({
    url : "../../getchartdata_payments_user.php",
    type : "GET",
    success : function(data){
      console.log(data);

      var clanarinajs = [];
      var vakufnamajs = [];
      var zekjatjs = [];


      for(var i in data) {
        clanarinajs.push(data[i].clanarina);
        vakufnamajs.push(data[i].vakufnama);
        zekjatjs.push(data[i].zekjat);
      }
      console.log(clanarinajs);
      console.log(vakufnamajs);
      console.log(zekjatjs);
      var chartdata = {
        labels: ["2019", "2020", "2021", "2022", "2023", "2024","2025"],
        datasets: [
          {
            label: "Clanarina",
            backgroundColor: "#4e73df",
            hoverBackgroundColor: "#2e59d9",
            borderColor: "#4e73df",
            data: clanarinajs
          },
          {
            label: "Vakufnama",
            backgroundColor: "#aafac8",
            hoverBackgroundColor: "#2e59d9",
            borderColor: "#4e73df",
            data: vakufnamajs
          },
          {
            label: "Zekjat",
            data: zekjatjs
          },
          {
            label: "Goal",
            data: [54000, 54000, 55620, 57289, 59007, 60777, 62601],
            type: "line",
            fill: "false",
            backgroundColor: "yellow",
            borderColor: "yellow",
          }
        ]
      };

      var ctx = document.getElementById("myBarChart");

      var mybarchart = new Chart(ctx, {
        type: 'bar',
        data: chartdata,
        options: {
          maintainAspectRatio: false,
          layout: {
            padding: {
              left: 10,
              right: 25,
              top: 25,
              bottom: 0
            }
          },
          scales: {
            xAxes: [{
              time: {
                unit: 'year'
              },
              gridLines: {
                display: false,
                drawBorder: false
              },
              maxBarThickness: 25,
            }],
            yAxes: [{
              ticks: {
                min: 0,
                max: 70000,
                maxTicksLimit: 5,
                padding: 10,
                // Include a dollar sign in the ticks
                callback: function(value, index, values) {
                  return 'KM' + number_format(value);
                }
              },
              gridLines: {
                color: "rgb(234, 236, 244)",
                zeroLineColor: "rgb(234, 236, 244)",
                drawBorder: false,
                borderDash: [2],
                zeroLineBorderDash: [2]
              }
            }],
          },
          legend: {
            display: false
          },
          tooltips: {
            titleMarginBottom: 10,
            titleFontColor: '#6e707e',
            titleFontSize: 14,
            backgroundColor: "rgb(255,255,255)",
            bodyFontColor: "#858796",
            borderColor: '#dddfeb',
            borderWidth: 1,
            xPadding: 15,
            yPadding: 15,
            displayColors: false,
            caretPadding: 10,
            callbacks: {
              label: function(tooltipItem, chart) {
                var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                return datasetLabel + ': KM' + number_format(tooltipItem.yLabel);
              }
            }
          },
        }
      });
    },
  });
});

控制台输出：

[{"clanarina":"240","vakufnama":"12500","zekjat":"0","year":"2019"},{"clanarina":"240","vakufnama":"0","zekjat":"0","year":"2021"},{"clanarina":"240","vakufnama":"0","zekjat":"0","year":"2022"},{"clanarina":"240","vakufnama":"0","zekjat":"0","year":"2023"},{"clanarina":"240","vakufnama":"0","zekjat":"0","year":"2024"},{"clanarina":"240","vakufnama":"0","zekjat":"0","year":"2025"}] chart-bar-demo.js:10:15

Array(385) [ undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, … ]
chart-bar-demo.js:22:15

Array(385) [ undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, … ]
chart-bar-demo.js:23:15

Array(385) [ undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, … ]
chart-bar-demo.js:24:15

如您所见，console.log(data) 也可以正常工作，但在变量中推送数据似乎是个问题。

感谢您的帮助！

Answer 1

PHP 返回的 JSON 在您推入数组时仍然是一个字符串。您会注意到数组长度对应于字符串的长度。

您需要在循环之前将 JSON 字符串解析为 JS 数组，您可以使用 JSON.parse(); 来完成此操作