如何不使用模板重复forEach循环，而是在使用chart.js绘制图表时获取所需数据

Question

在使用chart.js绘制图表时，如何不重复模板上的forEach循环，而是获取所需的数据？

我正在使用chart.js制作图表。所需的数据来自数据库。

我得到了正确的数据，只是我重复了7次forEach循环。 我怎么不能重复多次循环？

代码如下：

var resultsChart = document.getElementById("lineChart"); 
var lineChart = new Chart(resultsChart,{ 
        type: "line",
        data:  {
            labels: [
                <% skater.competitions.forEach(function(competition){ %>
                 " <%= competition.name %>" , 
                <% }); %>
            ],
            datasets: [{ 
                data: [
                     <% skater.competitions.forEach(function(competition){ %>
                  <%= competition.skillrace %> , 
                <% }); %>
                    ],
                label: "Skill Race",
                borderColor: "pink",
                fill: false
              }, { 
                data: [
                     <% skater.competitions.forEach(function(competition){ %>
                  <%= competition.dist222m %> , 
                <% }); %>
                    ],
                label: "222m",
                borderColor: "yellow",
                fill: false
              }, { 
                data: [
                     <% skater.competitions.forEach(function(competition){ %>
                  <%= competition.dist333m %> , 
                <% }); %>
                    ],
                label: "333m",
                borderColor: "green",
                fill: false
              }, { 
                data: [
                     <% skater.competitions.forEach(function(competition){ %>
                  <%= competition.dist500m %> , 
                <% }); %>
                    ],
                label: "500m",
                borderColor: "black",
                fill: false
              }, { 
                data: [
                     <% skater.competitions.forEach(function(competition){ %>
                  <%= competition.dist777m %> , 
                <% }); %>
                    ],
                label: "777m",
                borderColor: "orange",
                fill: false
              }, { 
                data: [
                     <% skater.competitions.forEach(function(competition){ %>
                  <%= competition.dist1000m %> , 
                <% }); %>
                    ],
                label: "1000m",
                borderColor: "blue",
                fill: false
              }, { 
                data: [
                     <% skater.competitions.forEach(function(competition){ %>
                  <%= competition.dist1500m %> , 
                <% }); %>
                    ],
                label: "1500m",
                borderColor: "red",
                fill: false
              }
            ]
          },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: false,
                        stepSize: 10000
                    }
                }]
            },
            title: {
              display: true,
              text: 'Distance Results in Chart (in miliseconds)',
              fontSize: 24,
            },
          }
   });


Chart.defaults.line.spanGaps = true;

如果您需要更多帮助信息，请告诉我！