代码之家 › 专栏 › 技术社区 › stone rock

如何在javascript中使用map()从javascript对象中提取数据?

reactjs javascript

stone rock · 技术社区 · 7 年前

我正在尝试使用 .map() 在javascript中。数据提取需要注入 stacked bar chart .

我正试图做类似的问题: Stacked bar charts in Chart.js with JSON data 但在我的情况下,我希望每个赛季的总跑步次数是条形图的高度,而堆积条形图的总高度将被分为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;

在J.J.S.

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() 为特定的比赛名称获得特定季节的跑步记录。如何解析数据外部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个不同的数组中之后,我们可以使用destructuring操作符 ... 解包数组元素并填充chartdata。

2 回复 | 直到 7 年前

Nikhil Aggarwal 7 年前

你可以试试下面的

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);

StudioTime 7 年前

您可以使用 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)

工作 codesandbox#demo