多层级Json数据的筛选

发表于 更新于 分类于 本文字数： 阅读时长 ≈ NaN:aN

最近在 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
},

最后完整的展示代码：

完整的展示代码

数据展示效果：

展示效果