使用 JSON 数组对象创建嵌套的 html 列表答案

【问题标题】：Create nested html list using JSON array object使用 JSON 数组对象创建嵌套的 html 列表
【发布时间】：2023-02-17 00:20:47
【问题描述】：

我有一个带有父节点的 Json 对象。父节点也可以是主数组对象中的单个节点。

[
    { "id": 1, "title": "A-Menu", "parent": null },
    { "id": 2, "title": "B-Menu", "parent": {
            "id": 1, "title": "A-Menu", "parent": null }
    },
    { "id": 3, "title": "C-Menu", "parent": {
            "id": 2, "title": "B-Menu", "parent": {
                "id": 1, "title": "A-Menu", "parent": null
            }
        }
    },
    { "id": 6, "title": "Z-Menu", "parent": {
            "id": 5, "title": "Y-Menu", "parent": {
                "id": 4, "title": "X-Menu", "parent": null }
        }
    },
    { "id": 5, "title": "Y-Menu", "parent": {
            "id": 4, "title": "X-Menu", "parent": null }
    },
    { "id": 4, "title": "X-Menu", "parent": null }
]

我想基于上面的 Json 创建一个如下所示的嵌套树列表：

<ul>
  <li>
    <a>A-Menu</a>
    <ul>
      <li>
        <a>B-Menu</a>
        <ul>
          <li>
            <a>C-Menu</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a>X-Menu</a>
    <ul>
      <li>
        <a>Y-Menu</a>
        <ul>
          <li>
            <a>Z-Menu</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

你能建议一下吗，这怎么可能？

我尝试像下面这样使用 jquery：

var jsonObj = [{"id":1,"title":"A-Menu","parent":null},{"id":2,"title":"B-Menu","parent":{"id":1,"title":"A-Menu","parent":null}},{"id":3,"title":"C-Menu","parent":{"id":2,"title":"B-Menu","parent":{"id":1,"title":"A-Menu","parent":null}}},{"id":6,"title":"Z-Menu","parent":{"id":5,"title":"Y-Menu","parent":{"id":4,"title":"X-Menu","parent":null}}},{"id":5,"title":"Y-Menu","parent":{"id":4,"title":"X-Menu","parent":null}},{"id":4,"title":"X-Menu","parent":null}];

//<ul id="allMenus"></ul>
var html = $('#allMenus');
                $.each(jsonObj, function(i) {
                    if(jsonObj[i].parent==null) {
                        $(html).append('<li id="menu'+result[i].id+'"><a href="javascript:void(0)">'+result[i].title+'</a></li>');
                    } else {
                        
                    }
                });

我不知道如何从无序的 json 对象递归创建列表。

有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery json treeview

【解决方案1】：

function createNestedList(data) {
  var html = "<ul>";
  for (var i = 0; i < data.length; i++) {
    if (data[i].parent === null) {
      html += "<li>" + data[i].title + createNestedListHelper(data[i].id, data) + "</li>";
    }
  }
  html += "</ul>";
  return html;
}

function createNestedListHelper(id, data) {
  var html = "<ul>";
  for (var i = 0; i < data.length; i++) {
    if (data[i].parent && data[i].parent.id === id) {
      html += "<li>" + data[i].title + createNestedListHelper(data[i].id, data) + "</li>";
    }
  }
  html += "</ul>";
  return html;
}

var jsonObj = [  { "id": 1, "title": "A-Menu", "parent": null },  { "id": 2, "title": "B-Menu", "parent": { "id": 1, "title": "A-Menu", "parent": null } },  { "id": 3, "title": "C-Menu", "parent": { "id": 2, "title": "B-Menu", "parent": { "id": 1, "title": "A-Menu", "parent": null } } },  { "id": 6, "title": "Z-Menu", "parent": { "id": 5, "title": "Y-Menu", "parent": { "id": 4, "title": "X-Menu", "parent": null } } },  { "id": 5, "title": "Y-Menu", "parent": { "id": 4, "title": "X-Menu", "parent": null } },  { "id": 4, "title": "X-Menu", "parent": null }];

var html = createNestedList(jsonObj);
$("#allMenus").html(html);

【讨论】：