如何使用javascript中的map()从javascript对象中提取数据? [英] How to extract data from javascript object using map() in javascript?
问题描述
我正在尝试使用javascript中的 .map()
从JSON数据中提取数据。数据提取需要注入堆积条形图
。
I am trying to extract data from JSON data using .map()
in javascript. The data extract needs to injected in stacked bar chart
.
我正在尝试类似这个问题:< a href =https://stackoverflow.com/questions/42001984/stacked-bar-charts-in-chart-js-with-json-data?rq=1> Chart.js中带有JSON数据的堆积条形图但在我的情况下,我希望每个赛季的总跑数将是条形图的高度,堆积条形图的总高度将分为3个堆栈。
I am trying to do similar to this question : Stacked bar charts in Chart.js with JSON data but in my case I want total runs per season that will be the height of barchart and the total height of stacked-barchart will be divided into 3 stacks.
检查堆叠条形图: 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中:
In 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文件。最终数据应如下所示:
I am using .map()
to get unique season and then again nested map()
to get runs for particular season for particular tournamentName. How can I parse the data external json file. The final data should look like this:
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个数据中:
I want to extract the data and store it in 3 data in the form of 3 arrays:
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
存储后我们可以使用解构运算符 ...
解压缩数组元素并填充chartdata。
After storing data in 3 different arrays we can just use destructuring operator ...
to unpack array elements and populate the chartdata.
推荐答案
您可以尝试以下
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);
这篇关于如何使用javascript中的map()从javascript对象中提取数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!