在 Node 中循环遍历 objects 的数组

Question

我有一个 Node 网络应用程序，并且最近开始合并 ChartJS 库以获取数据。这是我在 EJS 模板页面上的脚本标记中嵌套的内容：

<script>
let playerStatChart = new Chart(myChart, {
    type: 'bar',
    data: {
        labels: ['Freshman', 'Sophomore', 'Junior', 'Senior'],
        datasets: [{
            label: 'Points',
            // Works
            data: [1,2,3,4],
            // Does not work and appears blank
            // One of these data lines is commented out, so there isn't a redundancy
            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>

我正在尝试动态填充 data 中的值属于数据集，而不是包含 [1, 2, 3, 4] 的 pre-defined 数组.如您所见，我已经通过使用 EJS 注入值来动态填充图表标题作为玩家姓名。这是我正在使用的示例 "player" object：

  author: { id: 5e939f988ced3e0428c8b521, username: 'test' },
  comments: [
    {
      author: [Object],
      _id: 5eb31d2ea285dbf1f3eb6d80,
      text: 'Threesus forever.',
      createdAt: 2020-05-06T20:25:18.332Z,
      __v: 0
    }
  ],
  _id: 5e94ac2d81fa5428b0323fc1,
  name: 'Naz Mitrou-Long',
  image: 'https://alchetron.com/cdn/naz-long-b96e0ac4-b460-4dd7-ab76-de54cccbd62-resize-750.jpeg',
  position: 'Guard',
  description: 'Threesus of Nazareth',
  __v: 6,
  weight: 218,
  dob: 1993-08-03T05:00:00.000Z,
  hometown: 'Mississauga, ON',
  country: 'Canada',
  height_feet: 6,
  height_inches: 4,
  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
    }
  ]

如何遍历每个玩家的 "season" 值并动态填充类似于图表标题的图表数据。下面是一个我一直在玩的例子，它也在上面显示的代码之前的脚本标签中：

let player = "<%= player %>"
let pointAvg = []

player.season.forEach(function(season){
    pointAvg.push(season.ppg)
     })

但是，当我使用此代码并将数据值设置为 pointAvg 时，图表显示空白，没有任何值。我在这里错过了什么？

Answer 1

映射您的对象季节数组和return ppg 属性。通过使用地图，您可以避免使用额外的 pointAvg 数组。

const input = {
  _id: '5e94 ac2d81fa5428b0323fc1',
  name: 'Naz Mitrou-Long',
  image: 'https://alchetron.com/cdn/naz-long-b96e0ac4-b460-4dd7-ab76-de54cccbd62-resize-750.jpeg',
  position: 'Guard',
  description: 'Threesus of Nazareth',
  __v: 6,
  weight: 218,
  hometown: 'Mississauga, ON',
  country: 'Canada',
  height_feet: 6,
  height_inches: 4,
  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
    }
  ]
}

const result = input.season.map(({
  ppg
}) => ppg);
console.log(result)

在 Node 中循环遍历 objects 的数组

Loop through array of objects in Node

html

javascript

ejs

node.js

chart.js