使用 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 匹配。如果你看到另一个结构，请分享。谢谢。

标签： javascript html arrays json node.js

【解决方案1】：

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

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

如果您使用 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}
是的）））非常感谢。你是最棒的）