javascript - 将 JSON 转换为无序 HTML 列表(DFS？)

Question

我在将 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)

因为当名称未定义时，它不应该转到下一个更深的节点。

Answer 1

这是一个普通 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
    }
  }