我在试图获取html中的细枝值时遇到了一个问题，并将数据用于在html中显示带有chart.js的饼图的脚本
这就是我在php控制器中从db添加当前项目值的方式

$TEMPLATE_DATA['PROJECTS'] = $projects;

但是我需要的包含数据的字段是一个json，看起来像{“name”：“test”，“size”：“348”}
所以我在html中所做的是做一个for循环，在一个twig变量中存储该变量的数组

{% set brands = [] %}
{% for project in PROJECTS %}

    {% if project.name %}
    {% set brands = brands|merge([project.name]) %}
    {% endif %}
{% endfor %}

{% for brand in brands %}
   {{ brand |json_encode}}
{% endfor %}

这只获取项目的当前名称，但我还需要json中的其他数据，问题是当我需要为图表设置数据变量时，这就是脚本

<script>

var foo ='{{ brands |json_encode }}';
console.log(foo);

 console.log(typeof(foo));
// console.log(foo);

var data = {
    labels: [
        "Project 1",
        "Project 2",

        "Remaining"
    ],
    datasets: [
        {

            // data: [30, 40, 13],
            data: foo,

            backgroundColor: [
            "#FF6384",
                "#36A2EB",
                // "#FFCE56",
                // "#9861B1",
                // "#007D6F",
                // "#FF5D4D",
                // "#3B4856",
                "#9FADBD"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                // "#FFCE56",
                // "#9861B1",
                // "#007D6F",
                // "#FF5D4D",
                // "#3B4856",
                "#9FADBD"
            ]
        }]
};
var ctx = document.getElementById("myChart");
var options = {
  responsive: true,
        legend: {
          position: 'bottom'
        },
  // tooltips: {
  //       callbacks: {
  //           label: function(tooltipItem) {
  //               return "%" + Number(tooltipItem.yLabel) + " usage";
  //           }
  //       }
  //   },
  tooltips: {
        enabled: true,
        mode: 'single',
        callbacks: {
            title: function (tooltipItem, data) { 
                return " " + data.labels[tooltipItem[0].index]; 
            },
            label: function(tooltipItem, data) {
          return data['datasets'][0]['data'][tooltipItem['index']] + " Kb";
        },

            // label: function(tooltipItems, data) {
            //     return "Total usage: " + tooltipItems.yLabel + ' €';
            // },
            // footer: function (tooltipItem, data) { return "..."; }
        }
    },
  plugins: {
    datalabels: {
      formatter: (value, ctx) => {

        let sum = ctx.dataset._meta[0].total;
        let percentage = (value * 100 / sum).toFixed(2) + "%";
        return percentage;

      },
      color: '#fff',
    }
  }
};
var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: data,
    options: options
});
</script>

但最后我得到的只是一个字符串，而不是一个名称数组，我找不到在当前图表中使用该数据的方法