Question

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

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

此外，阵列可以有不同的深度。

这是我使用的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>

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

Answer 1

试试这个：

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/

Answer 2

我首先使用像this之类的东西将平面数据转换为层次结构json，因此它更具可迭代性。然后递归迭代JSON并将每个元素添加到字符串中。

Answer 3

如果我正确理解了这个问题，那么你试图从一系列对象中创建一个html列表。

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

如果您使用JQuery，可能会帮助您：

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

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

3 个答案: