JSON：編輯嵌套很深的值

Question

我JSON像這樣的數組：

var tree = [ 
     { 
     text: "Parent 1", 
     id: 1, 
     nodes: [ 
      { 
      text: "Child 1", 
      id: 2, 
      nodes: [ 
       { 
       text: "Grandchild 1" 
       id: 3, 
       }, 
       { 
       text: "Grandchild 2" 
       id: 4, 
       nodes: [ 
        { 
        text: "Grandchild 3" 
        id: 10, 
        }, 
        { 
        text: "Grandchild 4" 
        id: 11, 
        nodes: [ 
         { 
         text: "Grandchild 5" 
         id: 12, 
         }, 
         { 
         text: "Grandchild 6" 
         id: 13, 
         } 
        ] 
        } 
       ] 
       } 
      ] 
      }, 
      { 
      text: "Child 2" 
      id: 5, 
      } 
     ] 
     }, 
     { 
     text: "Parent 2" 
     id: 6, 
     }, 
     { 
     text: "Parent 3" 
     id: 7, 
     }, 
     { 
     text: "Parent 4" 
     id: 8, 
     }, 
     { 
     text: "Parent 5" 
     id: 9, 
     } 
    ]; 

我試圖創造條件，採取爲參數樹，ID和newText參數的函數，即將找到具有給定id的節點，用newText替換文本，並返回修改後的json。

例：

editTree(tree, 11, "Granchild 13435") 

有沒有辦法來實現這一目標？ 我不知道如何解決這個問題，因爲我需要密鑰的路徑才能編輯樹。

Answer 1

您可以對此使用遞歸函數。

var tree = [{"text":"Parent 1","id":1,"nodes":[{"text":"Child 1","id":2,"nodes":[{"text":"Grandchild 1","id":3},{"text":"Grandchild 2","id":4,"nodes":[{"text":"Grandchild 3","id":10},{"text":"Grandchild 4","id":11,"nodes":[{"text":"Grandchild 5","id":12},{"text":"Grandchild 6","id":13}]}]}]},{"text":"Child 2","id":5}]},{"text":"Parent 2","id":6},{"text":"Parent 3","id":7},{"text":"Parent 4","id":8},{"text":"Parent 5","id":9}] 
 

 
function editTree(tree, id, val) { 
 
    for (var i in tree) { 
 
    if (i == 'id') { 
 
     if (tree[i] == id) { 
 
     tree.text = val 
 
     return 1; 
 
     } 
 
    } 
 
    if (typeof tree[i] == 'object') editTree(tree[i], id, val) 
 
    } 
 
    return tree; 
 
} 
 

 

 
console.log(editTree(tree, 11, "Granchild 13435"))

Answer 2

你可以使用迭代和遞歸方法用於搜索節點。如果發現停止迭代並返回。

此建議使用Array#some，允許退出迭代。

如果存在來自實際node的node且該節點是一個數組，則該節點被迭代。

function editTree(tree, id, text) { 
 
    tree.some(function iter(o) { 
 
     if (o.id === id) { 
 
      o.text = text; 
 
      return true; 
 
     } 
 
     return Array.isArray(o.nodes) && o.nodes.some(iter); 
 
    }); 
 
} 
 

 
var tree = [{ text: "Parent 1", id: 1, nodes: [{ text: "Child 1", id: 2, nodes: [{ text: "Grandchild 1", id: 3, }, { text: "Grandchild 2", id: 4, nodes: [{ text: "Grandchild 3", id: 10, }, { text: "Grandchild 4", id: 11, nodes: [{ text: "Grandchild 5", id: 12, }, { text: "Grandchild 6", id: 13, }] }] }] }, { text: "Child 2", id: 5, }] }, { text: "Parent 2", id: 6, }, { text: "Parent 3", id: 7, }, { text: "Parent 4", id: 8, }, { text: "Parent 5", id: 9, }]; 
 

 
editTree(tree, 11, "Granchild 13435");  
 
console.log(tree);

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

Answer 3

下面是一個簡單的函數來找到匹配屬性和值的節點：

function findNode(nodes, prop, value) { 
    if(!value || !(nodes instanceof Array)) return; 
    for(var i=0; i<nodes.length; i++) { 
     if(node = (value == nodes[i][prop]) ? nodes[i] : findNode(nodes[i]['nodes'], value)) { 
     return node; 
     } 
    } 
} 

然後，只需撥打：

// Find node with id = 10 
var node = findNode(tree, 'id', 10); 
if(node) { 
    // Yeah! we found it, now change its text 
    node['text'] = 'Changed!'; 
} 

// Ensure tree has been updated 
console.log(tree); 

示例代碼段（請檢查id = 10的節點文本是否已更改）：

var tree=[{text:"Parent 1",id:1,nodes:[{text:"Child 1",id:2,nodes:[{text:"Grandchild 1",id:3},{text:"Grandchild 2",id:4,nodes:[{text:"Grandchild 3",id:10},{text:"Grandchild 4",id:11,nodes:[{text:"Grandchild 5",id:12},{text:"Grandchild 6",id:13}]}]}]},{text:"Child 2",id:5}]},{text:"Parent 2",id:6},{text:"Parent 3",id:7},{text:"Parent 4",id:8},{text:"Parent 5",id:9}]; 
 

 

 
function findNode(nodes, prop, value) { 
 
    if(!value || !(nodes instanceof Array)) return; 
 
    for(var i=0; i<nodes.length; i++) { 
 
     var node = (value == nodes[i][prop]) ? nodes[i] : findNode(nodes[i]['nodes'], prop, value); 
 
     if(node) { 
 
     return node; 
 
     } 
 
    } 
 
} 
 

 
var node = findNode(tree, 'id', 10); 
 
if(node) { 
 
    node['text'] = 'Changed!'; 
 
} 
 

 
console.log(tree)

Answer 4

我已經創建了一個使用遞歸的步行路程，其方法之一是正是你需要的庫。

https://github.com/dominik791/obj-traverse

使用findFirst()方法。第一個參數是一個根對象，而不是數組，所以你應該首先創建：

var tree = { 
    text: 'rootObj', 
    nodes: [ 
    { 
    text: 'Parent 1', 
    id: 1, 
    nodes: [ 
     { 
     'text': 'Child 1', 
     id: 2, 
     nodes: [ ... ] 
     }, 
     { 
     'name': 'Child 2', 
     id: 3, 
     nodes: [ ... ] 
     } 
    ] 
    }, 
    { 
    text: 'Parent2', 
    id: 6 
    } 
}; 

然後：

var objToEdit = findFirst(tree, 'nodes', { id: 11 }); 

現在objToEdit是要編輯的對象的引用。所以你可以：

objToEdit.text = 'Granchild 13435'; 

和你tree被更新。