How to fix SyntaxError: Unexpected token &

Question

I am sending a php coded in accordance with the json_encode function to a plantilla.twig where I want to graph a pie chart type and the browser shows me the following error in console uncaught SyntaxError: Unexpected token & ¨ and I red the line following data: [[& quot; Intermediate 17.5 inches & quot;, 2220]]

Controller Class

public function tiempoXEtapaAction()
{

    $em = $this->getDoctrine()->getManager();
    $servicepozo = $this->get('service.pozo');
    $pozoActual = $servicepozo->getPozoActual();
    $idpozo = $servicepozo->getPozoActual()->getId();

    $activityCollections = $em->getRepository('ActividadBundle:ActividadDiariaCollection')->findBy(array('pozo' => $idpozo), array('id' => 'ASC'));
    $intervalos = $em->getRepository('IntervaloBundle:Intervalo')->findBy(array('pozo' => $idpozo), array('id' => 'ASC'));
    $actividades = $em->getRepository('ActividadBundle:ActividadDiaria')->findBy(array('pozo' => $idpozo), array('id' => 'ASC'));


    $tiempoXIntervalo = array();

    foreach ($activityCollections as $activityCollection) //Dias
    {
        $fechaActCole = $activityCollection->getFecha();

        foreach ($intervalos as $intervalo) //Intervalos
        {
            if ($intervalo->getFechaInicio() <= $fechaActCole && $intervalo->getFechaFinal() >= $fechaActCole) {
                $temp = array();
                $temp[] = $intervalo.'';


                foreach ($actividades as $actividad) //Actividades
                {

                    if ($actividad->getCollection()->getId() == $activityCollection->getId()) {
                        $duracion[] = $actividad->getDuracion();
                    }

                }
                $temp[] = array_sum($duracion);

            }

        }
        $tiempoXIntervalo[] = $temp;


    }

     return array('tiempoXIntervalo'=> (json_encode($tiempoXIntervalo)));

Template.Twig

            title: {
                text: 'Distribución de tiempo por Intervalo'
            },
            xAxis: {
                reversed: false,
                title: {
                    enabled: true,
                    text: 'Dias'
                },
                labels: {
                    formatter: function () {
                        return this.value;
                    }
                },
                maxPadding: 0.05,
                showLastLabel: true,
                allowDecimals: false,
                min:0,
            },
            yAxis: {
                max:0,
                startOnTick: false,
                title: {
                    text: 'Profundidad [m]'
                },
                labels: {
                    formatter: function () {
                        return this.value;
                    }
                },
                lineWidth: 2,

            },
            legend: {
                enabled: true
            },

            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}h ({point.percentage:.1f}%)</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                data:{{tiempoXIntervalo}}
            }]
        });
    });

</script>

Answer 1

Thanks Fernando but your solution do not work for mi. Apparently the problem was Twig autoescaping variables. I tried to use Twig's raw filter to skip autoescaping and it's work for mi. Here the solution

data: $.parseJSON('{{ tiempoXIntervalo | raw }}')

Answer 2

You should check how to convert HTML entities Also, there is an extra space in & quot; It should be "

json_encode expects " so it should be ["Intermediate 17.5 inches",2220]