将JSON转换为无序HTML列表(DFS?)

时间:2017-05-02 15:35:01

标签: javascript json coffeescript dfs

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

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

1 个答案:

答案 0 :(得分:1)

以下是vanilla Javascript的回答:

"status": function(doc, req) {
            var data = JSON.parse(req.body);
            var value = data.value;
            var path = data.path;
            var message = 'set ' + path + ' status ' + value;
            var pathar = path.split(".");
            var level;
            var body = doc;
            var evalstr = "body.";
            if (pathar[1].length > 2) {
                level = (pathar[1].length) / 3;
                for (var i = 1; i <= level - 1; i++) {
                    evalstr += "tasks[\"" + pathar[0] + "." + pathar[1].substring(0, i * 3) + "\"].";
                }
                evalstr += "tasks[\"" + pathar[0] + "." + pathar[1] + "\"].status.push(" + JSON.stringify(value) + ");";
            } else {
                level = 1;
                evalstr += "tasks[\"" + pathar[0] + "." + pathar[1] + "\"].status.push(" + JSON.stringify(value) + ");";
            }
            eval([evalstr]);
            doc = body;
            //doc.tasks["20.t01"].tasks["20.t01t01"].status.push(value);
            return [doc, JSON.stringify({
                reg: evalstr,
                doc: body
            })];
        }