前端必备技能之一,按需分类 有给的数据时候为了处理数据方便一些,后端给的数据可能不是我们想要的数据结构,这时候就需要你稍微做一点点的处理才能为自己所用 现在有这样一个数组,后端给的,
policyDtos: [{clazzType: 1, clazzTypeText: '限签', remark: '严格限签', sourceTypeText: '地区收集'},
{clazzType: 2, clazzTypeText: '限售', remark: '限售', sourceTypeText: '地区收集'},
{clazzType: 3, clazzTypeText: '限价', remark: '限价', sourceTypeText: '地区收集'},
{clazzType: 4, clazzTypeText: '限购', remark: '限购', sourceTypeText: '地区收集'},
{clazzType: 5, clazzTypeText: '限贷', remark: '限贷', sourceTypeText: '地区收集'},
{clazzType: 6, clazzTypeText: '资金监管', remark: '资金监管', sourceTypeText: '地区收集'}],
上面的policyDtos为数组对象,需要根据clazzType进行拆分分类,同一类的要放在一个数组里面,可以用如下代码。
const arr = []
this.policyDtos.forEach(item => {
const parent = arr.find(cur => cur.clazzType === item.clazzType)
if (parent) {
parent.childs.push(item)
} else {
const obj = {
clazzTypeText: item.clazzTypeText,
clazzType: item.clazzType,
childs: [item]
}
arr.push(obj)
}
})
console.log('arr', arr)
最后打印出的arr 就是
arr: [{ clazzType: 1,
clazzTypeText: '限签',
childs: [{clazzType: 1, clazzTypeText: '限签', remark: '严格限签', sourceTypeText: '地区收集'}]
},
{ clazzType: 1,
clazzTypeText: '限售',
childs: [{clazzType: 1, clazzTypeText: '限售', remark: '限售', sourceTypeText: '地区收集'}]
},
{ clazzType: 1,
clazzTypeText: '限价',
childs: [{clazzType: 1, clazzTypeText: '限价', remark: '限价', sourceTypeText: '地区收集'}]
},
{ clazzType: 1,
clazzTypeText: '限购',
childs: [{clazzType: 1, clazzTypeText: '限购', remark: '限购', sourceTypeText: '地区收集'}]
},
{ clazzType: 1,
clazzTypeText: '限贷',
childs: [{clazzType: 1, clazzTypeText: '限贷', remark: '限贷', sourceTypeText: '地区收集'}]
},
{ clazzType: 1,
clazzTypeText: '资金监管',
childs: [{clazzType: 1, clazzTypeText: '资金监管', remark: '资金监管', sourceTypeText: '地区收集'}]
}]
最后页面粘上我的页面实现