我需要从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>
我希望这是清楚的。如果没有,请在评论中提出任何问题。提前谢谢你。
试试这个:
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,因此它更可迭代。然后递归迭代 JSON 并将每个元素添加到字符串中。
正确理解了这个问题,您正在尝试从对象数组中生成 html 中的列表。
因此,如果您不使用 JQuery,可能其中之一会对您有所帮助:
- 在 javascript 中创建 ul 和 li 元素。
- 创建一个 UL 并根据传递的数组填充它
如果你使用JQuery,这可能会对你有所帮助:
- 如何使用jquery从字符串数组生成UL Li列表?