从对象列表中创建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号的父节点,则父元素将不存在; 你已经处理过并弹出它.您必须将所有项目保留在数组中,直到完成为止.