前端数据扁平化会经常用到,如果没有技巧,那么会写大量繁琐代码实现。
下图就是通过过后台数据扁平化实现的。
首先看后台返回的数据,发现后台数据的共同点就是父节点typeOne都为0
话不多说上代码:
/*****notList为后台返回的数据 *******/
this.noproblem = this.ConvertArray(notList,0)
/***********数组扁平化调用函数****************/
ConvertArray(data, value) {
const arr = []
data.forEach(item => {
if(item.typeOne == value) {
arr.push(item)
const children = this.ConvertArray(data, item.typeTwo)
children.length && (item.children =children)
}
});
return arr
},
总结:使用的为回调函数,先筛选父节点,然后筛选出来父节点的子节点。