簡體   English   中英

JavaScript格式的對象數組到嵌套的子對象中

[英]JavaScript format array of objects into nested children

我有一個帶有parentId和排序值的對象數組,我想將它放入一個嵌套'children'的數組中並進行適當的排序。

例如,這是數據:

[{
    id: 1,
    sort: 2,
    parentId: null,
    name: 'A'
}, {
    id: 2,
    sort: 1,
    parentId: 1,
    name: 'A.1'
}, {
    id: 3
    sort: 2,
    parentId: 1,
    name: 'A.2'
}, {
    id: 4,
    sort: 1,
    parentId: null,
    name: 'B'
}]

我想改變這種方式的方式如下:

[{
    id: 4,
    sort: 1,
    parentId: null,
    name: 'B',
    children: []
}, {
    id: 1,
    sort: 2,
    parentId: null,
    name: 'A',
    children: [{
        id: 2,
        sort: 1,
        parentId: 1,
        name: 'A.1'
    }, {
        id: 3
        sort: 2,
        parentId: 1,
        name: 'A.2'
    }]
}]

這是排序的(id 4位於頂部,因為sort為1)並且子項嵌套並相應地排序。

有什么建議可以做到這一點嗎? 我可以遞歸循環來應用子項,但不知道如何維護對此的排序。

這是一個先排序並在此之后過濾的提案。

排序采用parentIdsort屬性。 這對於下一步是必要的,因為“過濾”需要排序的數組。

稍后使用Array#filter()過濾Array#filter() ,以下是thisArgs用於引用節點以便可能插入子節點。

編輯:未分類( id / parentId )數據的更新。

 var array = [{ id: 1, sort: 2, parentId: null, name: 'A' }, { id: 2, sort: 1, parentId: 1, name: 'A.1' }, { id: 3, sort: 2, parentId: 1, name: 'A.2' }, { id: 4, sort: 1, parentId: null, name: 'B' }], nested; array.sort(function (a, b) { return (a.parentId || -1) - (b.parentId || -1) || a.sort - b.sort; }); nested = array.filter(function (a) { a.children = this[a.id] && this[a.id].children; this[a.id] = a; if (a.parentId === null) { return true; } this[a.parentId] = this[a.parentId] || {}; this[a.parentId].children = this[a.parentId].children || []; this[a.parentId].children.push(a); }, Object.create(null)); document.write('<pre>' + JSON.stringify(nested, 0, 4) + '</pre>'); 

我試了一下然后回來了,已經有其他的答案,但無論如何我都會發布它。

此方法修改原始數組:

 var items = [{id: 1,sort: 2,parentId: null,name: 'A'}, {id: 2,sort: 1,parentId: 1,name: 'A.1'}, {id: 3,sort: 2,parentId: 1,name: 'A.2'}, {id: 4,sort: 1,parentId: null,name: 'B'}]; function generate_tree(arr){ var references = {}; arr.sort(function(a,b){ // Save references to each item by id while sorting references[a.id] = a; references[b.id] = b; // Add a children property a.children = []; b.children = []; if(a.sort > b.sort) return 1; if(a.sort < b.sort) return -1; return 0; }); for(var i=0; i<arr.length; i++){ var item = arr[i]; if(item.parentId !== null && references.hasOwnProperty(item.parentId)){ references[item.parentId].children.push(arr.splice(i,1)[0]); i--; // Because the current index now contains the next item } } return arr; } document.body.innerHTML = "<pre>" + JSON.stringify(generate_tree(items), null, 4) + "</pre>"; 

  1. 我將創建一個新的數據結構,如下所示:

    {1:{id:1,sort:2,parentId:null,name:'A'},2:{id:4,sort:1,parentId:null,name:'B'}}

需要注意的事項:新結構是一個對象 ,而不是一個數組,只包含其中最頂層的元素( parentId null

  1. 然后,對原始數組執行for ,並分配new_obj[ orig_arr_curr_elem[parentId] ].children.push(orig_arr_curr_elem)

  2. 然后創建一個新數組,其中包含來自new_obj sort()的elems(或children屬性),無論你想要什么

實現步驟1和2的代碼(使用節點運行):

var util = require('util');
var old_arr = [{
    id: 1,
    sort: 2,
    parentId: null,
    name: 'A'
}, {
    id: 2,
    sort: 1,
    parentId: 1,
    name: 'A.1'
}, {
    id: 3,
    sort: 2,
    parentId: 1,
    name: 'A.2'
}, {
    id: 4,
    sort: 1,
    parentId: null,
    name: 'B'
}];

var new_obj = {};
for (var i = 0; i < old_arr.length; i++){
    if ( old_arr[i].parentId == null )
        new_obj[ old_arr[i].id ] = old_arr[i];
}

for (var i = 0; i < old_arr.length; i++){
    if ( old_arr[i].parentId == null ) continue;
    new_obj[ old_arr[i].parentId ].children = new_obj[ old_arr[i].parentId ].children || [];
    new_obj[ old_arr[i].parentId ].children.push( old_arr[i] );
}

console.log(util.inspect(new_obj, {showHidden: false, depth: null}));

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM