在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>

这里是一个 "播放器 "模型的例子。

  _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>

我怎样才能填充那个静态的 pointAvg 的数组。ppg 中的每个对象的 season 数组，并使其动态化？

Answer 1

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

现在你有了模型数据 按照你的意愿使用它。