在JS脚本中推入PHP数组

Question

这是我的第一个帖子，如果不太好，请向我道歉。

这是我的"area chart.charts.php"其中数组为:

$data=array();
foreach ($result as $row) {
$chartDate = date("d/m", strtotime($row['created_at']));
$chartResultats = $row['traitements'];
$chart = array("chartResultats" => $chartResultats,"chartDate" => $chartDate);
array_push($data, $chart);
}

JSON响应:https://prnt.sc/1whxygm

我正试图检索数据，使用Ajax与Chart.JS一起使用，但我这样做的方式不起作用。有人知道怎么做吗?

我要的结果是:

chartResultats: [10, 30, 20]
chartDate: ["16/10", "16/10", "16/10"]

我尝试像这样使用Ajax:

$.ajax({
url:"./inc/charts/area_chart.charts.php",
method:"GET",
success:function(data)  {
console.log(data);
chartResultats = data["chartResultats"];
chartDate = data["chartDate"];
// Area Chart
var ctx = document.getElementById("chartResultats");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: [chartDate],
datasets: [{
data: [chartResulats],
}],

和Fetch，但是没有成功。我的图表给了我一个定义

你能帮助我或澄清我吗?提前感谢!

Answer 1

您没有说明如何输出$data数组以使其可用于AJAX。

要将$data输出为JSON，您必须以

结束脚本。

header('Content-Type: application/json;charset=UTF-8');
print json_encode($data);
exit();

然后可以使用浏览器打开charts.php页面并检查JSON输出。

然而，要获得所需的JSON，您需要以下内容:

$data=array(
'chartResultats' => array(),
'chartDate' => array(),
);
foreach ($result as $row) {
$data['chartDate'][] = date("d/m", strtotime($row['created_at']));
$data['chartResultats'][] = $row['traitements'];
}
header('Content-Type: application/json;charset=UTF-8');
print json_encode($data);
exit();

输出应该像

{
"chartResultats": [10, 30, 20],
"chartDate": ["16/10", "16/10", "16/10"]
}

在您发布的代码中，您在每次迭代中创建一个新字典，其中包含一个chartResultats r和一个chartDate d(让我们称之为{ r: 1, d: 1 }):

$chart = array("chartResultats" => $chartResultats,"chartDate" => $chartDate);

，然后将这个对象压入data，得到一个这样的对象数组:

array_push($data, $chart);

所以你的数据是[ { r: 1, d: 1 }, { r: 2, d: 2 }, ... ](字典的数组)而不是{ r: [ 1, 2, ... ], d: [ 1, 2, ... ] }(两个数组的字典)。

。

我认为这样，你已经正确地格式化了两个数组;不需要在成功回调中重新格式化。所以,试着

data: {
labels: data["chartDate"],    // Not [chartDate]
datasets: [{
data: data["chartResultats"],  // Not chartResultats
}],

Answer 2

或者使用echo

echo json_encode($data);

Answer 3

LSerni的回答可能会导致问题的解决，因为它解决了我认为在解决问题的前提中遗漏的最重要的东西chart is returning undefined。

除此之外，我看到当你得到响应时，在你的$.AJAX.success函数中，你只做一个可能会失败的赋值，因为data.chartResultats和data.chartDate是未定义的。相反，data是一个同时具有chartResultats和chartDate的对象数组。

chartResultats = data["chartResultats"];
chartDate = data["chartDate"];

因此，产生预期输出的一个解决方案(

)

chartResultats: [10, 30, 20]
chartDate: ["16/10", "16/10", "16/10"]

)是对数据进行迭代。下面是一个实现:

var chartResultats = [];
var chartDate = [];
data.forEach(function(record){
chartResultats.push(record.chartResultats);
chartDate.push(record.chartDate);
});