从 Twig 中的数组键中删除“”括号答案

【问题标题】：Remove " " brackets from array Keys in Twig从 Twig 中的数组键中删除“”括号
【发布时间】：2016-08-13 07:22:30
【问题描述】：

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

数组被传递给一个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++;
  }
}

【问题讨论】：

你想在 JavaScript 中使用数组吗？
更具体地说，我正在尝试使用 CanvasJS 绘制图形。示例：canvasjs.com/docs/charts/chart-types/html5-column-chart
或者，您可以在控制器中使用json_encode()，将结果字符串存储在变量中并使用Twig（不带|json_encode|raw）显示它。
print_r 结果：Array ( [title] => Array test [dataPoints] => Array ( [0] => Array ( [x] => disabled test object [y] => 17 [label ] => disabled test object ) ) ) 并且 Symfony 期望在 this->render 中有一个数组
返回不可读的这段代码是可读的（我用online JSON validator测试过）。即使它们有引号，库也应该读取这些键。

标签： javascript php arrays symfony twig

【解决方案1】：

引号对 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数组

在 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,
    );
}

在模板中显示数组并将其传递给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 数组并显示图表。

【讨论】：

【解决方案2】：

看起来第一个是 JavaScript 对象，第二个是 JSON，尝试像这样对字符串运行 JSON.parse 以将其转换回对象：

var fixed = JSON.parse('[{"x":"disabled test object","y":"17","label":"disabled test object"}]');

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

【讨论】：

我正在尝试使用上述方法解析 "[{"x":"disabled test object","y":"17","label":"disabled test object"}]" phpstorm 完美地找到并自动建议，但它只返回 null。我需要额外的文件来完成这个或某种导入吗？
你不应该需要任何额外的东西来使用那个 JavaScript 函数，你有没有尝试解析它然后 console.log()-ing 它来看看会发生什么？或者这就是你得到 null 的方式？
我在解析前后对数组进行了 window.alert() 编辑。在它被填充之前，在它为空之后。我现在正尝试通过 Twig 手动单步执行数组，我将在一分钟内更新问题。
@G_V 我正在尝试解析 "[{"x" 数组不应包含引号。
@A.L haha 显然 json_encode|raw 将整个数组变成了一个字符串，这使得它不可读。我已经删除了它，现在它可以工作了。更新你的答案，我会奖励你。