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

源数据:

[{
  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,遍历渲染即可
} 

练习案例:

源数据:[{vId: 1, aId: 1},{vId: 1, aId: 2},{vId: 2, aId: 1}]  ,如何 根据vId相同转变成 [{vId:1, aIds:[1,2]},{vId:2, aIds:[1]}]。可以参考上述解题方式。

function dataHandel(arr) {
    let result = [], obj = {}
    arr.forEach(item => {
        if(!obj[item.vId]) {
            result.push({
                vId: item.vId,
                aIds: [item.aId]
            });
        obj[item.vId] = item;
        } else {
            result.forEach(item1 => {
                if(item1.vId == item.vId) {
                    item1.aIds.push(item.aId)
                }
            })
        }
    })
    return result
}

// 测试
var arr = [{vId: 1, aId: 1},{vId: 1, aId: 2},{vId: 2, aId: 1}]  
console.log(dataHandel(arr))

 

你可能感兴趣的:(JS)