Javascript 从对象创建嵌套列表_Javascript

Javascript 从对象创建嵌套列表

javascript

Javascript 从对象创建嵌套列表,javascript,Javascript,我有以下目标 var json = { items:[ {id:45 , lable:"Test 1.2.1", parent_id: 2}, {id:12, lable:"Test 1.0", parent_id: 0}, {id:32, lable:"Test 1.1", parent_id: 12}, {id:2, lable:"Test 1.2", parent_id: 12} ] } 使用这个对象，我需要

我有以下目标

var json = {
    items:[
        {id:45 , lable:"Test 1.2.1", parent_id: 2},
        {id:12, lable:"Test 1.0", parent_id: 0},
        {id:32, lable:"Test 1.1", parent_id: 12},
        {id:2, lable:"Test 1.2", parent_id: 12}
    ]
}

使用这个对象，我需要创建一个嵌套列表，在浏览器中如下所示

测试1.0
- 测试1.1
- 测试1.2
  - 测试1.2.1

我的方法是编写一个函数，该函数将遍历对象并将值存储在元素列表的数组中

function appendItems(json){
    var list = json.items;
    var listelem = [];

    list.forEach(function(i){
        var listelements = document.createElement('li');
        listelements.setAttribute("id",i.id);
        listelements.setAttribute("data-parent-id", i.parent_id);
        listelements.innerText = i.lable;
        listelem.push(listelements);

    })

    console.log(listelem);    
}

但我不确定如何从这一点上获得嵌套结构，我将首先将数组转换为实际的树。你可以这样做：

var obj={
项目：[
{id:45，标签：“Test 1.2.1”，parent_id:2}，
{id:12，标签：“测试1.0”，父项id:0}，
{id:32，标签：“测试1.1”，父项id:12}，
{id:2，标签：“测试1.2”，父项id:12}
]
}
//首先，我们创建一个字典，这样我们就可以很容易地按id查找元素
var objDict=obj.items.reduce（函数（p，c）{
p[c.id]=c；
c、 儿童=[]；
返回p；
}, {});
//然后我们建造我们的树
var tree=obj.items.reduce（函数（p，c）{
//如果parent_id为零，则我们已找到根。
如果（！c.parent\u id）{
p=c；
}
//否则，请找出家长是谁，并将此家长添加为孩子
否则{
objDict[c.parent\u id]。children.push（c）；
}
返回p；
}, {});
log（JSON.stringify（tree））这里有一个使用递归的简单解决方案。我使用了一个helper函数，它为给定的父id返回一个子数组。希望对您有所帮助
'use strict';

(function() {

    function childrenOf(targetId, items) {
        var children = [];
        items.forEach(function(item) {
            if (item.parent_id === targetId) {
                children.push(item);
            }
        });
        return children;
    }

    function nestedList(id, items) {
        var result = '';
        var children = childrenOf(id, items);
        if (children.length) {
            result = '<ul>';
            children.forEach(function(child) {
                result += '<li>';
                result += child.label;
                result += nestedList(child.id,items);
                result += '</li>';
            });
            result += '</ul>';
        }
        return result;
    }

    var json = {
        items:[
            {id:45 , label:"Test 1.2.1", parent_id: 2},
            {id:12, label:"Test 1.0", parent_id: 0},
            {id:32, label:"Test 1.1", parent_id: 12},
            {id:2, label:"Test 1.2", parent_id: 12}
        ]
    }

    var rootId = 0;
    var output = nestedList(rootId, json.items);
    console.log('<html><body>');
    console.log(output);
    console.log('</body></html>');



})();

“严格使用”；
（功能（）{
函数childrenOf（targetId，items）{
var children=[]；
items.forEach（功能（项目）{
if（item.parent_id==targetId）{
儿童。推（项）；
}
});
返回儿童；
}
函数嵌套列表（id、项）{
var结果=“”；
var childrenOf（id，items）；
if（儿童长度）{
结果=“”；
children.forEach（函数（child）{
结果+=“”；
结果+=child.label；
结果+=嵌套列表（子.id，项）；
结果+=''；
});
结果+=''；
}
返回结果；
}
var json={
项目：[
{id:45，标签：“Test 1.2.1”，parent_id:2}，
{id:12，标签：“test1.0”，父\u id:0}，
{id:32，标签：“测试1.1”，父项id:12}，
{id:2，标签：“Test 1.2”，父\u id:12}
]
}
var-rootId=0；
var output=nestedList（rootId，json.items）；
控制台日志（“”）；
控制台日志（输出）；
控制台日志（“”）；
})();

它产生以下输出：
<html>

<body>
    <ul>
        <li>Test 1.0
            <ul>
                <li>Test 1.1</li>
                <li>Test 1.2
                    <ul>
                        <li>Test 1.2.1</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>

</html>



测试1.0

测试1.1
测试1.2

测试1.2.1





您是否愿意看到类似这样的插件？如果不是，它将需要递归。没有插件试图通过纯jsSo实现这一点，所以也没有jquery，对吗？@ndd right no jquery每次调用childrenOf
都需要再次循环整个列表，这不是很有效。你说得很对。首先运行数组并提前生成一系列子数组会更有效。thnxs，我一直在确定子-父关系或如何实现这一点，我注意到“parent_id”值等于对象中的父“id”值。我甚至没有想到把数组转换成一棵树