多层级Json数据的筛选

最近在 vue 项目中,遇到一个数据问题的处理,通过调接口得到的数据是多层级树形结构的 json 数据,在项目中需要筛选这些数据,并整合为 vue 组件适用的多层级 json 数据格式。
下面就直接看例子吧

这是获取的原始数据:

原始数据

下面是我需要的数据格式:

需要的数据格式

下面是我的数据处理方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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
},

最后完整的展示代码:

完整的展示代码

数据展示效果:

展示效果

您的打赏,是我创作的动力,谢谢支持。
0%