在 EJS 模板脚本标记中填充数据

Question

我正在努力将 ChartJS 库添加到 Node Web 应用程序，但在动态传递来自 "Player" 模型的数据时遇到了问题。这是 EJS 模板的脚本标记部分：

<script>
    let myChart = document.getElementById('myChart').getContext('2d');
    let pointAvg = [1, 2, 3, 4]

    console.log(pointAvg)
    let playerStatChart = new Chart(myChart, {
        type: 'bar',
        data: {
            labels: ['Freshman', 'Sophomore', 'Junior', 'Senior'],
            datasets: [{
                label: 'Points',
                data: pointAvg,
                backgroundColor: 'rgb(149,16,16, 0.4)',
                borderWidth: 1,
                borderColor: '#000',
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            }]
        },
        options: {
            title: {
                display: true,
                text: "Points: <%= player.name %>",
                fontSize: 25
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

</script>

下面是播放器模型中 "player" 的示例：

  _id: 5e94ac2d81fa5428b0323fc1,
  name: 'Naz Mitrou-Long',
  season: [
    {
      year: '2012-2013',
      grade: 'Freshman',
      gp: 18,
      gs: 0,
      mpg: 6.9,
      fg: 0.348,
      tp: 0.278,
      ft: 1,
      rpg: 0.8,
      apg: 1,
      spg: 0.3,
      bpg: 0,
      ppg: 1.4
    },
    {
      year: '2013-2014',
      grade: 'Sophomore',
      gp: 36,
      gs: 7,
      mpg: 20.3,
      fg: 0.432,
      tp: 0.4,
      ft: 0.643,
      rpg: 1.6,
      apg: 1.1,
      spg: 0.2,
      bpg: 0.1,
      ppg: 7.1
    },
    {
      year: '2014-2015',
      grade: 'Junior',
      gp: 34,
      gs: 33,
      mpg: 27.5,
      fg: 0.449,
      tp: 0.391,
      ft: 0.755,
      rpg: 2.9,
      apg: 2,
      spg: 0.8,
      bpg: 0.1,
      ppg: 10.1
    },
    {
      year: '2015-2016',
      grade: 'R. Senior',
      gp: 8,
      gs: 8,
      mpg: 31.6,
      fg: 0.425,
      tp: 0.291,
      ft: 0.6,
      rpg: 2.9,
      apg: 1.9,
      spg: 0.6,
      bpg: 0.3,
      ppg: 12
    },
    {
      year: '2016-2017',
      grade: 'Senior',
      gp: 35,
      gs: 35,
      mpg: 33.3,
      fg: 0.473,
      tp: 0.384,
      ft: 0.795,
      rpg: 4.6,
      apg: 2.7,
      spg: 1.2,
      bpg: 0,
      ppg: 15.1
    }
  ]

该播放器数据已经从Node服务器传到客户端，可以使用了。目前我将其他值传递给模板，如下所示：

<h1><%= player.name %></h1>

如何使用 season 数组中每个对象的 ppg 填充静态 pointAvg 数组并使其变为动态数组？

Answer 1

<script>
var vPlayer = '<%- JSON.stringify(player) %>';
    console.log(vPlayer);
</script>

现在你有了模型数据。想怎么用就怎么用。

Answer 2

如果您使用 EJS 将数据从 nodejs 发送到客户端脚本标记。使用此方法。

<script>
    let data='<%- JSON.stringify(player) %>';
    data= JSON.parse(data);
</script>

Stringify 将 return 您的对象 string-ed。 Parse 会将其转换回对象以供进一步使用。

在 EJS 模板脚本标记中填充数据

Populate data in EJS Template script tag

html

ejs

node.js