[英]How to extract data from javascript object using map() in javascript?
我正在嘗試使用javascript中的.map()
從JSON數據中提取數據。 數據提取需要注入stacked bar chart
。
我正在嘗試類似於此問題: 在Chart.js中使用JSON數據堆積條形圖,但就我而言,我希望每個賽季的總行駛次數將是barchart的高度,而stacked-barchart的總高度將分為3堆棧。
檢查此以獲取堆積的條形圖: https : //gionkunz.github.io/chartist-js/examples.html#stacked-bar
我的JSON數據:
const batdata=[
{"season":2008,
"runs":25,
"tournamentName":"XYZ"
},
{"season":2008,
"runs":125,
"tournamentName":"ABC"
},
{"season":2008,
"runs":825,
"tournamentName":"PQR"
},
{"season":2009,
"runs":425,
"tournamentName":"XYZ"
},
{"season":2009,
"runs":255,
"tournamentName":"ABC"
},
{"season":2010,
"runs":275,
"tournamentName":"XYZ"
},
{"season":2010,
"runs":675,
"tournamentName":"ABC"
}
];
export default batdata;
在chart.js中:
import React, { Component } from 'react';
import batdata from './batdata';
const uniq = a => [...new Set(a)]
const uniqueseason = uniq(
batdata.map( newdata => newdata.season)
)
const runsperseason = batdata.map( newdata => {
})
class Chart extends Component {
render(){
return(
<div>
</div>
)}
}
export default Chart;
我正在使用.map()
獲得唯一的賽季,然后再次嵌套map()
來獲得特定錦標賽名稱在特定季節的跑步。 我如何解析數據外部json文件。 最終數據應如下所示:
labels = [2008,2009 2010]
Chartdata = [
[25, 125, 825] <--- Height of barchart = 825+25+125 and it will have 3 stacks because there are 3 tournamentName
[425, 255, 0] <-- tournamentName: PQR not present in season 2009 so 3rd element zero
[275, 675, 0] <---tournamentName: PQR not present in season 2010 so 3rd element zero
]
我想提取數據並將其以3個數組的形式存儲在3個數據中:
1)Runs in season 2008 for tournamentName: XYZ,ABC, PQR
2)Runs in season 2009 for tournamentName: XYZ, ABC, PQR
3)Runs in season 2010 for tournamentName: XYZ, ABC, PQR
在將數據存儲在3個不同的數組中之后,我們可以僅使用解構運算符...
來解包數組元素並填充chartdata。
您可以使用Array#reduce
創建映射以定義此類過濾對象。
let filterData = batdata.reduce((filter, value, index) => {
if (filter[value.season]) {
filter[value.season] = [...filter[value.season], value.season];
} else {
filter[value.season] = [value.season];
}
return filter;
}, {});
console.log(filterData)
工作代碼和郵箱
您可以嘗試關注
const batdata=[{"season":2008,"runs":25,"tournamentName":"XYZ"},{"season":2008,"runs":125,"tournamentName":"ABC"},{"season":2008,"runs":825,"tournamentName":"PQR"},{"season":2009,"runs":425,"tournamentName":"XYZ"},{"season":2009,"runs":255,"tournamentName":"ABC"},{"season":2010,"runs":275,"tournamentName":"XYZ"},{"season":2010,"runs":675,"tournamentName":"ABC"}]; // Create set for unique tournament names let tournaments = new Set(); /* Create an object with key as season name and value as object with ** tournament name as key and run as value */ let obj = batdata.reduce((a,{season, runs, tournamentName}) => { a[season] = a[season] || {}; a[season][[tournamentName]] = runs; tournaments.add(tournamentName); return a; },{}); // Create array from set of unique tournament names tournaments = Array.from(tournaments); // Get the labels - seasons let labels = Object.keys(obj); // Get the data let chartData = Object.values(obj); // Set runs as 0 for missing tournament in the season chartData = chartData.map((o) => tournaments.reduce((a,t) => [...a, o[t] ? o[t] : 0], [])); console.log(labels); console.log(chartData);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.