js拿到接口数据处理成三级或者四级结构再进行渲染-Toy模板网

这篇具有很好参考价值的文章主要介绍了js拿到接口数据处理成三级或者四级结构再进行渲染。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

背景：接口的数据结构一层套一层类似于这样
后端返回真实的数据如下：
js 数组数据3级,javascript,开发语言,ecmascript
这是个四级结构需要渲染的也是四级只需要拿到每个层级的name和第一个层级的ID
用最笨的方式来一层层解析再进行渲染文章来源地址https://www.toymoban.com/news/detail-538981.html

// 处理渲染左侧菜单的渲染
const outinner = result.dbcFiles;
let allData = [];
for (let i in outinner) {
let str = Object.keys(outinner).toString();
var index1 = str.lastIndexOf('.');
var index2 = str.length;
if (index1 >= 1) {
    str = str.substring(index1, index2);
}
// 如果得到的后缀命为arxml需要四层的渲染结构
if (str === '.arxml') {
    let empty = true;
    let i1Item = {};
    i1Item.name = i;
    let i1List = [];
    for (let j in outinner[i]) {
        empty = false;
        let i2Item = {};
        let i2List = [];
        i1Item.dbcId = outinner[i].dbcId;
        i2Item.name = j;
        const temp = outinner[i][j] || {};
        if (temp.length > 0) {
            temp.map((i3) => {
                let i3Item = {};
                let i3List = [];
                i3Item.name = i3.name;
                i2List.push(i3Item);
                const signal = i3.signals || [];
                signal.map((i4) => {
                    let i4Item = {};
                    i4Item.label = i4.name;
                    i4Item.value = i4.name;
                    i3List.push(i4Item);
                });
                i3Item.i3List = i3List;
            });
            i2Item.i2List = i2List;
            i1List.push(i2Item);
        }
    }
    if (!empty) {
        i1Item.i1List = i1List;
        allData.push(i1Item);
    }
} else if (str === '.dbc') {
}
console.log(allData);