使用 jQuery 将 JSON 中的项目递归返回到新列表中答案

【问题标题】：Returning items in JSON recursively into a new list with jQuery使用 jQuery 将 JSON 中的项目递归返回到新列表中
【发布时间】：2016-01-31 04:53:42
【问题描述】：

大约一个小时前，我发表了一篇关于获取 JSON 文件内容的帖子（我已删除）。直到后来我才发现 JSON 可以简单地作为 JS 对象访问，so accessing the object isn't an issue any longer. 但是，现在我想递归地将元素添加到 HTML 列表中，并且在某处出现逻辑流错误，但我就是不知道如何解决它。（我已经连续工作了五个小时，所以这可能是一个原因）。

function init(src) {
    $.getJSON(src, {
        format: "json"
    }).done(function (data) {
        var json = $(data);
        main(json);
    });
}

function main(json) {
    var base = $("body");
    base.html(traverse(json[0]));
}

function traverse(node) {
    var newList = $("<ol/>");
    if (typeof node == "object") {
        $.each(node, function (k, v) {
            var newItem = $('<li><a href="#">' + k + '</a></li>');
            traverse(v);
            newItem.appendTo(newList);
        });
    } else {
        // Not sure if `$(this)` will simply return this item's name?
        var newItem = $('<li><a href="#">' + $(this) + '</a></li>');
        newItem.appendTo(newList);
    }

    return newList;
}

init("myjson.json");

myjson.json的示例输入：

{
  "S": {
    "NP": {
      "N": "i"
    },
    "VP": {
      "V": "like",
      "NP": {
        "Det": "the",
        "N": "bananas"
      }
    }
  }
}

单项添加后递归停止，所以输出为：

<ol><li>S</li></ol>

但预期的输出是：

<ol>
  <li>S
    <ol>
      <li>NP
        <ol>
          <li>N
            <ol>
              <li>i</li>
            </ol>
          </li>
        </ol>
      </li>
      <li>VP
        <ol>
          <li>V
            <ol>
              <li>like</li>
            </ol>
          </li>
          <li>NP
            <ol>
              <li>Det
                <ol>
                  <li>the</li>
                </ol>
              </li>
              <li>N
                <ol>
                  <li>bananas</li>
                </ol>
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

【问题讨论】：

所以应该明确要求用户给出他们投反对票的理由。

标签： jquery json recursion

【解决方案1】：

问题在于，当您递归遍历数据时，您没有使用递归调用的返回结果。

var newItem = $('<li><a href="#">' + k + '</a></li>');
// output of this call is not used
traverse(v);
newItem.appendTo(newList);

添加结果后，它就可以工作了：

traverse(v).appendTo(newItem);

JSFiddle

【讨论】：