使用 Javascript 从 json 数据中动态嵌套 ul\li 列表

Posted 2023-03-05

【中文标题】使用 Javascript 从 json 数据中动态嵌套 ul\\li 列表

【英文标题】：Dynamic nested ul\li list from json data using Javascript使用 Javascript 从 json 数据中动态嵌套 ul\li 列表

【发布时间】：2014-02-04 01:52:40

【问题描述】：

我需要从 json 数组创建一个动态嵌套的 ul\li 列表。

注意！我可以使用 jQuery 进行自我转换，但在这种情况下，我需要使用字符串，因为它是 node.js 并且我无权访问 DOM。

数组也可以有不同的深度。

这是我使用的 json 数据以及它在转换后的外观。

var data = ["id": "1", "name": "name_1", "parent_id": "0", "depth": "0",
        "id": "2", "name": "name_2", "parent_id": "0", "depth": "0",
        "id": "3", "name": "name_3", "parent_id": "1", "depth": "1",
        "id": "4", "name": "name_4", "parent_id": "3", "depth": "2"];

<ul>
  <li>name_1</li> //depth 0
  <li>name_2  //depth 0
    <ul>
      <li>name_3 //depth 1
        <ul>
          <li>name_3</li> //depth 2
        </ul>
      </li>
    </ul>
  </li>
</ul>

我希望这很清楚。如果没有，请在评论中提出任何问题。 提前谢谢你。

【问题讨论】：

那里有一些奇怪的 JSON。我认为 JSON 的全部意义在于它是分层的。您的 JSON 似乎“扁平化”。

是的。所以，我需要处理这个（

这是一些奇怪的 html，如果您至少将下一个深度放在它自己的 LI 中，而不是与前一个深度相同的 LI 中，那会更容易。

我同意@simonplus - 你能控制 JSON 格式吗？如果是这样，摆脱 id 并将孩子嵌入到他们父母的数组属性中。有副作用，它会小得多。

您可以看到每个 json 行都有一个 parent_id，它与其中一个 json 字符串的 id 匹配。如果你看到另一个结构，请分享。谢谢。

【参考方案1】：

如果我正确理解了这个问题，您正试图从对象数组中生成 html 列表。

因此，如果您不使用 JQuery，可能其中之一会帮助您：

Create ul and li elements in javascript. Create a UL and fill it based on a passed array

如果您使用 JQuery，这可能会对您有所帮助：

How to generate UL Li list from string array using jquery?

【参考方案2】：

我首先将平面数据转换为分层 json，使用类似 this 的东西，所以它更可迭代。然后递归迭代 JSON 并将每个元素添加到字符串中。

【参考方案3】：

试试这个：

var data = ["id": "1", "name": "name_1", "parent_id": "0", "depth": "0",
    "id": "2", "name": "name_2", "parent_id": "0", "depth": "0",
    "id": "3", "name": "name_3", "parent_id": "1", "depth": "1",
    "id": "4", "name": "name_4", "parent_id": "3", "depth": "2"];

var initLevel = 0;

var endMenu =getMenu("0");

function getMenu( parentID )
       return data.filter(function(node) return ( node.parent_id === parentID ) ; ).map(function(node)
           var exists = data.some(function(childNode)  return childNode.parent_id === node.id; );
           var subMenu = (exists) ? '<ul>'+ getMenu(node.id).join('') + '</ul>' : "";
           return '<li>'+node.name +  subMenu + '</li>' ;
       );
 
console.log( '<ul>'+endMenu.join('')+ '</ul>');

但是，我认为基于您的数据的正确输出将类似于：

    <ul>
        <li>name_1
            <ul>
                <li>name_3
                    <ul>
                        <li>name_4</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>name_2</li>
    </ul>

这里是JSFiddle sample

更新版本：

http://jsfiddle.net/LqES7/47/

【讨论】：

你好。玩了一会儿之后，我发现它有一个错误。尝试将第三行 parent_id 更改为 2 并不起作用（（如果您有任何想法，请帮助。

@user2960708 找到了，我更新了小提琴和答案

是的，现在它正在工作。谢谢你。但我还有一个挑战。我正在构建可排序的嵌套菜单。当我改变元素的顺序时，它在 db 中没有改变。因此，我为每个元素添加了索引值，现在我需要更改函数以根据该索引对元素进行排序。如果您有任何想法，将不胜感激））

是的，我只是根据它的兄弟姐妹获取 li 的索引并将其保存到数据库。现在看起来像这样 "id": "1", "name": "name_1", "parent_id": "0", "depth": "0", index: 0

是的）））非常感谢。你是最棒的）