vue 根据数组对象属性值分类,把一个数组拆分为多个数组

847 阅读1分钟

前端必备技能之一,按需分类 有给的数据时候为了处理数据方便一些,后端给的数据可能不是我们想要的数据结构,这时候就需要你稍微做一点点的处理才能为自己所用 现在有这样一个数组,后端给的,

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: '地区收集'}]
       }]

最后页面粘上我的页面实现 在这里插入图片描述