我在将 JSON 转换为列表时遇到了一些问题。我能够读取所有元素,但目前它在结构上是一个错误的列表。
这是 JSON:
{
name: 'test,
value: 'value',
nodes: [
{
name: 'next test',
value: 'next value',
nodes: [...]
},
{
name: 'third test',
value: 'third value',
nodes: [...]
}
]
}
我想创建这样的东西:
<ul>
<li>test: value</li>
<ul>
<li>next test: next value</li>
<li>third test: third value</li>
</ul>
</ul>
我在 CoffeeScript 中创建了一个循环,但它却生成了类似这样的内容:
<ul>
<li>test: value</li>
<ul>
<li>next test: next value</li>
<ul>
<li>third test: third value</li>
</ul>
</ul>
</ul>
所以一切都是相互嵌套的。
这是我的代码:
point = $('#jstree_demo_div');
loopData = (node) ->
if(node.name != undefined)
name = node.name;
value = node.value;
ul = $('<ul>');
li = $('<li>');
li.append(name + ' - <b>' + value + '</b>');
ul.append(li);
point.append(ul);
point = li;
for chart in node.nodes
loopData(chart);
loopData(json);
知道我应该在这里更改什么来制作正确的结构列表吗?
有这样的条件:
if(node.name != undefined)
因为当名称未定义时,它不应该转到下一个更深的节点。
最佳答案
这是一个普通 Javascript 的答案:
var json = {
name: 'test',
value: 'value',
nodes: [
{
name: 'next test',
value: 'next value',
nodes: [{}]
},
{
name: 'third test',
value: 'third value',
nodes: [{}]
}
]
}
function makeNewList(obj) {
// if the object does not contain children, make a 'li' element only
if (obj.nodes[0].name === undefined) {
var res = document.createElement('li');
res.innerHTML = obj.name + ": " + obj.value;
return res;
}
// otherwise, first make a 'ul' element with main name and value, then
// nest a new 'ul' with child nodes inside
else {
var res = document.createElement('ul');
var nameLi = document.createElement('li');
nameLi.innerHTML = obj.name + ": " + obj.value;
res.appendChild(nameLi);
var nestedNodes = document.createElement('ul');
obj.nodes.forEach(function(node) {
nestedNodes.appendChild(makeNewList(node));
})
res.appendChild(nestedNodes);
return res
}
}
关于javascript - 将 JSON 转换为无序 HTML 列表(DFS?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43741903/