数组对象通过里面对象的某个属性分组或者分组汇总

源数据:

[{
  date: '2018-02',
  recordCharts: [{typeName: '小修',totalCount: 10},{
    typeName: '一保',totalCount: 20},{
    typeName: '二保',totalCount: 30}]
},{
  date: '2019-02',
  recordCharts: [{typeName: '小修',totalCount: 40},{
    typeName: '一保',totalCount: 50},{
    typeName: '二保',totalCount: 60}]
}]

目标数据:

[{name: '一保',value: [20, 50]},{
  name: '二保',value: [30, 60]},{
  name: '小修',value: [10, 40]
}]

首先我们可以看到,源数据是一个二维的数组对象,而目标数据是一个一维的数组对象。

那么我们可以将目标数组转成一个中间数据之后,这个中间数据如下:

[{typeName: '小修',totalCount: 10},{
  typeName: '一保',totalCount: 20},{
  typeName: '二保',totalCount: 30},{
  typeName: '小修',totalCount: 40},{
  typeName: '一保',totalCount: 50},{
  typeName: '二保',totalCount: 60
}]

我们可以很清楚的看到,这个中间数据就是将源数据中的 recordCharts 下的每一项都放入了一个新数组中,这样源数据就转换的中间数据了,实现如下:

function firstHandle(arr){
  let newArr = []
  let dateArr = []
  arr.forEach(item => {
      if(item.recordCharts.length) {
          newArr.push(item.recordCharts)
      }
      dateArr.push(item.date)        
  })
  return { newArr: [].concat.apply([], newArr), dateArr }
}

接下来我们可以看到中间数据和目标数据之间,就是根据  typeName 的值,对同一属性下值相同的 totalCount 放到同一个数组中进行分类,实现如下:

function dataHandle( myResIdArr ) {
  let map = {}, resDest = [];//map为标杆对象(可以理解为归类工具),resDest为处理后 最终满足需求的数据集合,resDest[i].data即为该大类下的数据
  for(let i = 0; i < myResIdArr.length; i++){
    let ai = myResIdArr[i];
    if(!map[ai.typeName]){
      //此处push插入的数据结构可根据需求,自我定制
      resDest.push({
        name: ai.typeName,//按“typeName”属性,将该属性值相同的归为一类
        value: [ai.totalCount]//该大类下的数据list,(ai.totalCount)需要什么数据就放入什么
      });
      map[ai.typeName] = ai;
    }else{
      for(let j = 0; j < resDest.length; j++){
        let dj = resDest[j];
        if(dj.name== ai.typeName){
          dj.value.push(ai.totalCount);
          break;
        }
      }
    }
  }
  return resDest //resDest[i].totalCount即为resDest[i].typeName该大类下的数据list,遍历渲染即可
} 

 

发布了85 篇原创文章 · 获赞 37 · 访问量 15万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章