源数据:
[{
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))