多层级Json数据的筛选和重组

多层级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        
},

展示代码：

数据展示效果：

这篇文章是由这个博客网站作者发布的