JS數組 父子關系 生成 對象

 

JS數組（父子關系）數據如下:

var data = [{"id":"1","parentId":"0","name":"主目錄"},
{"id":"2","parentId":"1","name":"1級目錄：2"},
{"id":"3","parentId":"1","name":"1級目錄：3"},
{"id":"4","parentId":"2","name":"2級目錄：4"},
{"id":"5","parentId":"3","name":"2級目錄：5"},
{"id":"6","parentId":"3","name":"2級目錄：6"},
{"id":"7","parentId":"6","name":"3級目錄：7"},
{"id":"8","parentId":"7","name":"4級目錄：8"},
{"id":"9","parentId":"5","name":"3級目錄：9"},
{"id":"10","parentId":"9","name":"4級目錄：10"}
]; 

 

JS數組 ID關系圖，如下：

|-0
  |-2
    |-4

  |-3
    |-5
      |-9
        |-10
    |-6
      |-7
        |-8

 

JS 轉換代碼：

var getJsonTree=function(data,parentId){
        var itemArr=[];
        for(var i=0;i<data.length;i++){ 
            var node=data[i];
            //data.splice(i, 1)
             if(node.parentId==parentId ){ 
                var newNode={id:node.id,title:node.name,nodes:getJsonTree(data,node.id)};
                itemArr.push(newNode);              
             }
        }
        return itemArr;
    }  

 

使用方法：

var jsonArray = getJsonTree(data,'0');
console.log(jsonArray);

這是輸出結果.

[{"id":"1","title":"主目錄","nodes":[{"id":"2","title":"1級目錄：2","nodes":[{"id":"4","title":"2級目錄：4","nodes":[]}]},{"id":"3","title":"1級目錄：3","nodes":[{"id":"5","title":"2級目錄：5","nodes":[{"id":"9","title":"3級目錄：9","nodes":[{"id":"10","title":"4級目錄：10","nodes":[]}]}]},{"id":"6","title":"2級目錄：6","nodes":[{"id":"7","title":"3級目錄：7","nodes":[{"id":"8","title":"4級目錄：8","nodes":[]}]}]}]}]}]

<注意：上面的輸出中，即使nodes為空數組，也將該屬性輸出了，如果nodes為空，不進行輸出，使用下面代碼.>

 

下面的代碼做了判斷，如果數組為空，將不給對象添加nodes屬性

            var getJsonTree=function(data,parentId){
                    var itemArr=[];
                    for(var i=0;i<data.length;i++){ 
                        var node=data[i];
                        //data.splice(i, 1)
                         if(node.parentId==parentId ){ 
                            var newNode={id:node.id,title:node.name};
                            var result = getJsonTree(data,node.id);
                            if(result.length > 0) {
                                newNode['nodes'] = result
                            }
                            itemArr.push(newNode);              
                         }
                    }
                    return itemArr;
                }  

輸出結果：

[{"id":"1","title":"主目錄","nodes":[{"id":"2","title":"1級目錄：2","nodes":[{"id":"4","title":"2級目錄：4"}]},{"id":"3","title":"1級目錄：3","nodes":[{"id":"5","title":"2級目錄：5","nodes":[{"id":"9","title":"3級目錄：9","nodes":[{"id":"10","title":"4級目錄：10"}]}]},{"id":"6","title":"2級目錄：6","nodes":[{"id":"7","title":"3級目錄：7","nodes":[{"id":"8","title":"4級目錄：8"}]}]}]}]}]