使用JavaScript从json数据dynamic嵌套ul \ li列表

我需要从json数组中创build一个dynamic嵌套的ul \ li列表。

注意! 我可以使用jQuery来完成我自己的转换,但在这种情况下,我需要使用string,因为它是node.js,而且我无法访问DOM。

此外arrays可以有不同的深度。

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

我希望这是明确的。 如果不是,请在评论中提出任何问题。 先进的谢谢你。

       

网上收集的解决方案 "使用JavaScript从json数据dynamic嵌套ul \ li列表"

尝试这个:

 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示例

更新后的版本:

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

我首先将平面数据转换成层次结构json,使用类似这样的东西,所以它更易于迭代。 然后recursion迭代JSON并将每个元素添加到一个string。

如果我正确地理解了这个问题,你正试图在一个对象数组中生成一个html列表。

所以,如果你不使用JQuery,可能其中的一个将帮助你:

  • 在javascript中创buildul和li元素。
  • 创build一个UL并根据传递的数组来填充它

如果你使用JQuery,这可能会帮助你:

  • 如何使用jquery从string数组中生成UL Li列表?