javascript - 如何创建现有 json 的树

Question

我想解析从 api 获取的 json

我有以下架构

nodes = [
    {
        id: 1,
        name: 'root1',
        key: 'value1'
        key1: 'value2'
        children: [
            { id: 2, name: 'child1' },
            { id: 3, name: 'child2' }
        ]
    },
    {
        id: 4,
        name: 'root2',
        key3: 'value3'
        key4: 'value4'
        children: [
            { id: 5, name: 'child2.1' },
            {
                id: 6,
                name: 'child2.2',
                key5: 'value5'
                key6: 'value6'
                children: [{
                    id: 7,
                    name: 'subsub',
                    children: [{
                        id: 8,
                        name: 'subsubsub'
                    }]
                }]
            }
        ]
    }
];

我正在尝试关注但不起作用

data = []

var nodesFun = function(n, data, cObj) {
    let obj = {}
    obj["name"] = n['name']
    if (n['children']) {
        console.log(obj);
        console.log("name--> "+n['name']);
        let childList = []
        for (let i=0; i < n['children'].length; i++){
            console.log("cname--> "+n['children'][i]['name']);
            childList.push({"name": n['children'][i]['name']})
            let dataObj = nodesFun(n['children'][i], data, obj)
            if (dataObj){
                data.push(dataObj)
            }
        }
        obj["children"] =  childList
        cObj["children"] =  obj
        return cObj
    }else{
      cObj["children"] =  obj
      return cObj
    }
}
nodesFun(nodes, data, {})
console.log(nodes);

现在我想使用递归函数将上面的 json 转换为以下格式

nodes = [{
        id: 1,
        name: 'root1',
        children: [
            { id: 2, name: 'child1' },
            { id: 3, name: 'child2' }
        ]
    },
    {
        id: 4,
        name: 'root2',
        children: [
            { id: 5, name: 'child2.1' },
            {
                id: 6,
                name: 'child2.2',
                children: [{
                    id: 7,
                    name: 'subsub',
                    children: [{
                        id: 8,
                        name: 'subsubsub'
                    }]
                }]
            }
        ]
    }
];

Answer 1

您可以使用 array#forEach 和递归方法修改原始 nodes 数组。遍历节点的每个键，如果键包含 key 单词，则删除它，如果包含 children 则再次调用 deleteKey 函数。

var nodes = [ { id: 1, name: 'root1', key: 'value1', key1: 'value2', children: [ { id: 2, name: 'child1' }, { id: 3, name: 'child2' } ] }, { id: 4, name: 'root2', key3: 'value3', key4: 'value4', children: [ { id: 5, name: 'child2.1' }, { id: 6, name: 'child2.2',key5: 'value5', key6: 'value6', children: [{ id: 7, name: 'subsub', children: [{ id: 8, name: 'subsubsub' }] }] } ] } ];

var deleteKey = (nodes) => {
  nodes.forEach(node => {
    Object.keys(node).forEach(k => {
      if(k.includes('key'))
        delete node[k];
      if(k == 'children')
        deleteKey(node[k]);
    })
  });
}
deleteKey(nodes);
console.log(nodes);

.as-console-wrapper { max-height: 100% !important; top: 0; }

如果您想要一个新数组，可以使用 array#reduce 和 array#map。

var nodes = [ { id: 1, name: 'root1', key: 'value1', key1: 'value2', children: [ { id: 2, name: 'child1' }, { id: 3, name: 'child2' } ] }, { id: 4, name: 'root2', key3: 'value3', key4: 'value4', children: [ { id: 5, name: 'child2.1' }, { id: 6, name: 'child2.2',key5: 'value5', key6: 'value6', children: [{ id: 7, name: 'subsub', children: [{ id: 8, name: 'subsubsub' }] }] } ] } ];

var removeKey = (nodes) => {
  return nodes.map(node => {
    return Object.keys(node).reduce((r, k) => {
      if(!k.includes('key'))
        r[k] = node[k];
      if(k == 'children')
        r[k] = removeKey(node[k]);        
      return r;
    },{});
  });
}
console.log(removeKey(nodes));

.as-console-wrapper { max-height: 100% !important; top: 0; }