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相比）......

到目前为止我尝试的是：

（pre）源数据（对象列表）满足一个条件：一个儿子在父母之前不能出现
使它成为关联数组（key = id，value = object），因此必须使用字符串键控。
弹出最后一个数组元素并将其推送到其父元素的children数组中。对所有非null-parent元素重复此操作。
希望这应该有用。

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: []
  }]
}]

（免责声明：我是作者）

从对象列表中创建javascript树

2 个答案: