[英]Loop through array of objects in Node
我有一個 Node web 應用程序,最近開始將 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>
我正在嘗試動態填充數據中的值是數據集,而不是包含 [1, 2, 3, 4] 的預定義數組。 如您所見,我已經通過使用 EJS 注入值來動態填充圖表的標題作為玩家名稱。 這是我正在使用的示例“播放器”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
}
]
如何遍歷每個玩家的“賽季”值並動態填充類似於圖表標題的圖表數據。 下面是一個我一直在玩的例子,它也在上面顯示的代碼之前的腳本標記中:
let player = "<%= player %>"
let pointAvg = []
player.season.forEach(function(season){
pointAvg.push(season.ppg)
})
但是,當我使用此代碼並將數據值設置為pointAvg
時,圖表顯示為沒有值的空白。 我在這里想念什么?
Map 通過您的 object 季節數組並返回 ppg 屬性。 通過使用 map,您可以避免使用額外的 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)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.