gpt4 book ai didi

javascript - 从 Twig 中的数组键中删除 ""括号

转载 作者:行者123 更新时间:2023-11-30 16:07:53 25 4
gpt4 key购买 nike

Twig 使我的数组键格式不正确,并将“”括号添加到我从 symfony2 Controller 传递的数组键中。

数组被传递给一个 Javascript 图形库,它需要:

[{x:"disabled test object",y:"17",label:"disabled test object"}]

相反,{{ array|json_encode|raw }} 按照 Twig 文档和我通读过的其他 SO 问题的建议返回不可读:

[{"x":"disabled test object","y":"17","label":"disabled test object"}]



我认为实现起来并不复杂,但到目前为止,通过 json_encode 选项还没有得到明确的答案。我不确定我是否可以从 PHP 做些什么,所以我现在添加了标签。

编辑:

我现在正尝试使用 Twig 手动遍历数组。 {{dump(points)}} 确认它已正确填充

{% set points = chart.dataPoints|json_encode|raw %} <=== this was the problem
dataPoints:
{% for point in points %}
{{ dump(point) }}
{ x: {{ point.x }}, y: {{ point.y }}, label: {{ point.label }} }
{% if loop.lastIndex != true %}
,
{% endif %}
{% endfor %}

但这也不起作用,因为转储从未到达。这是尝试通过 Twig 访问 foreach 中对象的正确方法吗?此代码是多个 Twig 文档教程的合并。

编辑 2,解决方案:

{% set points = chart.dataPoints|json_encode|raw %} 将整个数组变成了一个字符串,使得 javascript 无法将其解释为数组。删除它之后,剩下的就是确保查询结果具有正确的数组键并在将 X 轴数据传递给 Twig 之前对其进行转换。

$i = 0;
$points = array();
/** @var array $query_result*/
foreach($query_result as &$row) {
foreach($row as $value) {
$point[] = [
'x' => ($i)*10,
'y' => $value['y'],
'label' => $value['label']
];
$points[$i] = $point;
$i++;
}
}

最佳答案

对于 CanvasJS,引号不是问题。正如您在下面的示例中看到的,"x": 有效(我选择了 this example ):

window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Top Oil Reserves"
},
data: [{
dataPoints: [
{ x: 1, y: 297571, label: "Venezuela"},
{ "x": 2, "y": 267017, label: "Saudi" }
]
}]
});

chart.render();
}
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 200px; width: 100%;"></div>
</body>
</html>


所以我们需要为dataPoints:提供一个JSON数组:

  1. 在 Controller 函数中定义 PHP 数组并将其传递给模板:
public function myAction()
{
// …

$json = array(
array(
'x' => 1,
'y' => 297571,
'label' => 'Venezuela',
),
array(
'x' => 2,
'y' => 267017,
'label' => 'Saudi',
),
);

return array(
// …
'json' => $json,
);
}
  1. 在模板中显示数组并将其传递给 dataPoints :
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<script>
var json = {{ json|json_encode|raw }};
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Top Oil Reserves"
},
data: [{
dataPoints: json
}]
});

chart.render();
}
</script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

呈现的输出将是:

// …
<script>
var json = [{"x":1,"y":297571,"label":"Venezuela"},{"x":2,"y":267017,"label":"Saudi"}];
// …

CanvasJS 将能够读取这个 JavaScript 数组并显示图表。

关于javascript - 从 Twig 中的数组键中删除 ""括号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36746773/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com