如何从 JavaScript 对象呈现 HTML 中的嵌套列表？

Posted 2023-03-05

【中文标题】如何从 JavaScript 对象呈现 HTML 中的嵌套列表？

【英文标题】：How to render nested list in HTML from JavaScript object?

【发布时间】：2018-05-27 19:49:39

【问题描述】：

我有一个对象，看起来像这样：

let obj = 
  name: "name1",
  nest: [
    
      name: "name2",
      nest: [
        
          name: "name3"
        ,
        
          name: "name4",
          nest: [
            
              name: "name5",
              nest: [
                
                  name: "name6"
                
              ]
            ,
            
              name: "name7"
            ,
            
              name: "name8"
            
          ]
        
      ]
    
  ]


let parent = document.querySelector("ul");

function forOf (obj) 
	for (let key in obj) 
		if ( typeof obj[key] === "object" && obj.hasOwnProperty("nest") ) 
			createList(obj[name], obj[key]);
		 else if ( typeof obj[key] !== "object" ) 
			let item = document.createElement("li");
			item.textContent = obj[key];
			parent.appendChild(item);
		 else 
			forOf(obj[key]);
		
	


function createList(obj, skills) 
	let item = document.createElement("ul");
	item.textContent = obj;
	parent.appendChild(item);
	parent = item;
	forOf(skills);


forOf(obj);

我需要渲染嵌套无序列表的树。我解析了我的对象，但我无法以正确的方式呈现它。我无法解决每个嵌套列表的父项问题。也许，您有什么解决方法的想法吗？

我想得到这样的结果：example

【问题讨论】：

请更具体地说明您想要的行为、与您获得的行为有何不同以及您迄今为止尝试过的行为。

是的，当然：期望的行为是嵌套列表的正确呈现，具有不同的嵌套级别。像这样：i.stack.imgur.com/bjuI6.png

【参考方案1】：

您可以使用单个循环，其中仅定义值的键并将嵌套数组作为子数组。

function createList(parent, array) 
    array.forEach(function (o) 
        var li = document.createElement("li"),
            ul;

        li.textContent = o.name;
        parent.appendChild(li);
        if (o.nest) 
            ul = document.createElement("ul");
            li.appendChild(ul);
            createList(ul, o.nest);
        
    );


var  object =  name: "name1", nest: [ name: "name2", nest: [ name: "name3" ,  name: "name4", nest: [ name: "name5", nest: [ name: "name6" ] ,  name: "name7" ,  name: "name8" ] ] ] 

createList(document.querySelector("ul"), [object]);

<ul></ul>