从使用Javascript JSON数据动态嵌套UL \\李名单 [英] Dynamic nested ul\li list from json data using Javascript

问题描述

我需要创建从JSON数组动态嵌套UL \\李名单。

I need to create a dynamic nested ul\li list from json array.

注意！我可以做这种转变我自己使用jQuery，但在这种情况下，我需要一个字符串的工作，因为它的Node.js和我没有访问DOM。

NOTE! I can do that transformation my self using jQuery, but in this case i need to work with a string, since it's node.js and i don't have access to DOM.

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

Also the array can have different depth.

这是JSON数据和我一起工作以及应如何看改造后。

This is json data i work with and how it should look after transformation.

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>

我希望这是显而易见的。如果没有，请问评论的任何问题。
谢谢你在先进。

I hope this is clear. If not please ask any questions in the comment. Thank you in advanced.

推荐答案

试试这个：

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>');

不过，我认为根据您的数据正确的输出将是这样的：

However, I think the correct output based on your data will be something like:

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

下面是的jsfiddle样品

更新版本：

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

这篇关于从使用Javascript JSON数据动态嵌套UL \\李名单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！