從對象列表中創建javascript樹

Question

我想將一個對象列表“翻譯”成jstree可以食用的json格式：

data = [
    { 
        "data" : { 
            "title" : "father",
            "attr" : { "href" : "#" }
        },
        "children" : [
            { 
                "data" : { 
                    "title" : "Older Son",
                    "attr" : { "href" : "#" }
                },
                "children" : []
            },
            { 
                "data" : { 
                    "title" : "Younger Son",
                    "attr" : { "href" : "#" }
                },
                "children" : []
            }
        ]
    },
]

我的輸入如下：

[
Object
id: 35
name: "bnm,bnm"
parent_id: null
, 
Object
id: 36
name: "ghk"
parent_id: 35
, 
Object
id: 37
name: "hgkgh"
parent_id: null
, 
Object
id: 38
name: "jklhjk"
parent_id: null
, 
Object
id: 39
name: "fghdfgh"
parent_id: 38
, 
Object
id: 40
name: "bsdbd"
parent_id: 38
,
...]

嗯，說實話，這不是一棵樹，而是一片森林。 但沒關系。

我花了很多時間在上面，但沒能讓它發揮作用。 在javascript中運行數組似乎很討厭（與Java，C ++或PHP相比）......

到目前為止我嘗試過的是：

1. （前）源數據（對象列表）滿足一個條件：一個兒子不能出現在它的父母之前
2. 使它成為關聯數組（key = id，value = object），因此必須使用字符串鍵控。
3. 彈出最后一個數組元素並將其推送到其父元素的children數組中。 對所有非null父元素重復此操作。
4. 希望這應該有效。

Answer 1

您將首先將所有項目放入由其ID標記的稀疏數組中，並轉換除子項之外的所有項（應該存在但是為空）並包括父ID：

var itemsByID = [];
items.forEach(function(item) {
    itemsByID[item.id] = {
        data: {title: item.name},
        children: [],
        parentID: item.parent_id
    };
});

然后你會想要通過所有項目，將孩子添加到他們的父母：

itemsByID.forEach(function(item) {
    if(item.parentID !== null) {
        itemsByID[item.parentID].children.push(item);
    }
});

然后找到根源：

var roots = itemsByID.filter(function(item) { return item.parentID === null; });

然后通過刪除父ID清除項目：

itemsByID.forEach(function(item) { delete item.parentID; });

樹的根將在roots 。

---

您的方法不起作用的原因是，如果任何子節點具有更大ID號的父節點，則父元素將不存在; 你已經處理過並彈出它。 您必須將所有項目保留在數組中，直到完成為止。

Answer 2

也許unsplay有訣竅嗎？

>> var unsplay = require('unsplay');
>> unsplay([{id: 0}, {id: 1, pid: 0}], 'id', 'pid');
[{
  item: {id: 0},
  children: [{
    item: {id: 1, pid: 0},
    children: []
  }]
}]

（免責聲明：我是作者）