Remove ” ” brackets from array Keys in Twig

Twig malforms my array keys and adds ” ” brackets to my array keys passed from a symfony2 controller.

The array is passed to a Javascript graphics library which requires:

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

Instead {{ array|json_encode|raw }} as suggested by the Twig docs and other SO questions I’ve read through returns the unreadable:

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

I figure this should not be complicated to achieve but going through the json_encode options so far has not resulted in a clear answer. I am unsure whether there is something I can do from PHP so I’ve added the tag for now.

EDIT:

I am now attempting to step through the array manually using Twig. {{dump(points)}} confirms it is filled properly

{% 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 %}

But this does not work either as the dump is never reached. Is this the correct way of trying to access objects in a foreach via Twig though? This code is an amalgamation of several Twig docs tutorials.

EDIT 2, the solution:

The line {% set points = chart.dataPoints|json_encode|raw %} turned the whole array into a single string, making it impossible for javascript to interpret as an array. After removing this, all that was left was to make sure the query result had the proper array keys and to transform the X-axis data before passing it to 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++;
  }
}

Answer

Quotes are not a problem for CanvasJS. As you can see in the example below, "x": works (I took 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>

So we need to provide a JSON array for dataPoints:

Define the PHP array in your Controller’s function and pass it to the template:

public function myAction()
{
    // …

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

    return array(
        // …
        'json' => $json,
    );
}

Display the array in the template and pass it to 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>

The rendered output will be:

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

CanvasJS will be able to read this JavaScript array and display the chart.

Advertisement

Answer