Javascript 从对象生成树

对象：

    var src = {
    0: {child: [1], title: "Books"},
    1: {child: [2,3], title: "Programming"},
    2: {title: "Languages"},
    3: {child: [4,5],title: "Databases"},
    4: {title: "MongoDB"},
    5: {title: "dbm"}
};

如何以该对象的形式构建树

<div id="tree">
    <ul>
        <li id="0">
            <span>Books</span>
            <ul>
                <li id="1">
                    <span>Programming</span>
                    <ul>
                        <li id="2">
                            <span>Languages</span>
                        </li>
                        <li id="3">
                            <span>Databases</span>
                            <ul>
                                <li id="4">
                                    <span>MongoDB</span>
                                </li>
                                <li id="5">
                                    <span>dbm</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

书


程序设计


语言文字


数据库


蒙哥达


数据库管理

简化树的结构是改变的，但本质是改变的 残余请告诉我

---

我试过了，但数据结构不同

var data = {
    0: {title: "Books"},
    1: {pid: 0, title: "Programming"},
    2: {pid: 1, title: "Languages", ch: 0},
    3: {pid: 1, title: "Databases"},
    4: {pid: 3, title: "MongoDB", ch: 0},
    5: {pid: 3, title: "dmb", ch: 0}
};          
    function makeTree(data) {
    var child = [];
    var i = 0;
    for (var key in data) {
        if (data[key].hasOwnProperty('pid')) {
            if (data[key].hasOwnProperty('ch')) {
                child[i] = document.createElement('li');
                child[i].setAttribute('id', key);
                child[i].innerHTML = data[key].title + ' <span></span></li>';
            }
            else {
                child[i] = document.createElement('li');
                child[i].setAttribute('id', key);
                child[i].innerHTML = data[key].title + '<span></span>';
                child[i].innerHTML += '<ol><li id=' + key + '>' + data[key].title + '<span></span></li></ol>';
            }
            document.getElementById(data[key].pid + "").appendChild(child[i]);
            i++;
        }
        else {
            var li = document.createElement('li');
            li.setAttribute('id', key);
            li.innerHTML = data[key].title + '<span></span>'
            tree.appendChild(li);
        }
    }
}

var数据={
0:{title:“Books”}，
1:{pid:0，标题：“编程”}，
2:{pid:1，标题：“语言”，ch:0}，
3:{pid:1，标题：“数据库”}，
4:{pid:3，标题：“MongoDB”，ch:0}，
5:{pid:3，标题：“dmb”，ch:0}
};          
函数makeTree（数据）{
var child=[]；
var i=0；
for（var输入数据）{
if（data[key].hasOwnProperty（'pid'））{
if（data[key].hasOwnProperty（'ch'））{
child[i]=document.createElement（'li'）；
子[i].setAttribute（'id'，键）；
child[i].innerHTML=data[key].title+''；
}
否则{
child[i]=document.createElement（'li'）；
子[i].setAttribute（'id'，键）；
子[i]。innerHTML=数据[key]。标题+“”；
子[i].innerHTML+='
'+data[key].title+'
'；
}
document.getElementById（数据[key].pid+“”）。appendChild（子[i]）；
i++；
}
否则{
var li=document.createElement（'li'）；
li.setAttribute（'id'，键）；
li.innerHTML=数据[key]。标题+“”
树。附子（李）；
}
}
}

---

它可以工作，但不正确

您可以通过这样做（我使用纯javascript，因为您没有用jquery或其他任何东西标记问题）：

var src={
0:{child:[1]，标题：“Books”}，
1:{child:[2,3]，标题：“编程”}，
2:{标题：“语言”}，
3:{child:[4,5]，标题：“数据库”}，
4:{标题：“MongoDB”}，
5:{标题：“dbm”}
};
var rootNodes=[]；
//创建dom元素
var-DomeElements=[]；
用于（src中的var prop）{
var ul=document.createElement（'ul'）；
var li=document.createElement（'li'）；
var span=document.createElement（'span'）；
span.innerHTML=src[prop].title；
李.儿童（span）；
ul.儿童（li）；
domElements[domElements.length]=ul；
}
//嵌套元素
对于（变量i=0；i

你可以这样做。它生成您想要的HTML。它从父级到子级递归迭代

var outputHtml = '<div id="tree">';
function buildTree(parrent)
{
    var currentParent = parrent;
     outputHtml += '<ul>';
     if(parrent === -1)
     {
         outputHtml += '<li id="' + 0 + '">';
         outputHtml += '<span>'+ src[0].title +'</span>';
         buildTree(0);
         outputHtml += '</li>';
     }
    else{
         for(var i = 0, childArray = src[currentParent].child, iLength = childArray.length; i < iLength; ++i)
         {
             outputHtml += '<li id="' + childArray[i]+ '">';
             outputHtml += '<span>'+ src[childArray[i]].title +'</span>';
             if(src[childArray[i]].child)
                 buildTree(childArray[i]);
             outputHtml += '</li>';
         }
    }

     outputHtml += '</ul>';
}
buildTree(-1);
outputHtml += '</div>';

var outputHtml=''；
函数构建树（parrent）
{
var currentParent=parrent；
outputHtml+='
'；
如果（参数==-1）
{
outputtml+='
”；
outputtml+=''+src[0]。title+''；
构建树（0）；
outputHtml+='
'；
}
否则{
对于（var i=0，childArray=src[currentParent].child，iLength=childArray.length；i”；
outputHtml+=''+src[childArray[i]].title+''；
if（src[childArray[i]].child）
buildTree（childArray[i]）；
outputHtml+=''；
}
}
outputHtml+='
'；
}
buildTree（-1）；
outputHtml+=''；

• 添加开头div
• 检查它是否为root并添加，然后调用

  buildTree

  打印子级
• 对于父对象的每个子对象，打印它
• 如果它有子项，请调用

  buildTree

  也打印它们
• 添加结束div

正如您在这里看到的，它工作正常：

---

显示您迄今为止尝试过的内容。请参考我尝试过的此链接，但数据结构不同：我不想使用第三方库。在快速回答之前，请先查看我的代码。它是在不使用第三方库的情况下完成的。@timkit:如果您认为这是问题的解决方案，请接受此答案，谢谢。请写下如何使用您的代码？我把它放在一个函数中并返回“rootNodes”。结果：三要素UL，没有其他。不幸的是，情况并非如此，请采取行动

var outputHtml = '<div id="tree">';
function buildTree(parrent)
{
    var currentParent = parrent;
     outputHtml += '<ul>';
     if(parrent === -1)
     {
         outputHtml += '<li id="' + 0 + '">';
         outputHtml += '<span>'+ src[0].title +'</span>';
         buildTree(0);
         outputHtml += '</li>';
     }
    else{
         for(var i = 0, childArray = src[currentParent].child, iLength = childArray.length; i < iLength; ++i)
         {
             outputHtml += '<li id="' + childArray[i]+ '">';
             outputHtml += '<span>'+ src[childArray[i]].title +'</span>';
             if(src[childArray[i]].child)
                 buildTree(childArray[i]);
             outputHtml += '</li>';
         }
    }

     outputHtml += '</ul>';
}
buildTree(-1);
outputHtml += '</div>';