JSON 到 JavaScript 变量通过 AJAX 和 PHP MYSQL => 数组未定义

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);
?>

杰森：

[{"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();