多层级Json数据的筛选
最近在vue项目中,遇到一个数据问题的处理,通过调接口得到的数据是多层级树形结构的json数据,在项目中需要筛选这些数据,并整合为vue组件适用的多层级json数据格式。
下面就直接看例子吧
获取的原始数据:
需要的数据格式:
数据处理方法:
selcetCatalogue (data) {
if (data === null || data.length === 0) { return [] }
let temp = data
let TempCatalogue = []
// 下面适用filter对数据进行筛选,然后用forEach循环数据
temp.filter(e => e.api === false).forEach(el => {
if (el === null) return false
let Catalogue = {
label: null,
value: null,
children: []
}
Catalogue.label = el.catalogueName
Catalogue.value = el.id
// 这里通过掉用自己的方法,用递归的思想处理数据
Catalogue.children = el.childCatalogue.length > 0 ? this.selcetCatalogue(el.childCatalogue) : el.childCatalogue
if (Catalogue.value !== null && Catalogue.value !== '') {
TempCatalogue.push(Catalogue)
}
})
return TempCatalogue
},
展示代码:
数据展示效果:
这篇文章是由这个博客网站作者发布的