循环遍历对象和顺序子值
Loop through object and order sub values
首先:
我在MYSQL中创建了一个论坛结构:
表:[boards]
-> id, parent_board, title, description
简单又好。
这是数据库响应:
[{"id":1,"parent_board":0,"title":"Lorem 1","description":"ec40db959345153a9912"},
{"id":2,"parent_board":0,"title":"Lorem 2","description":"bb698136a211ebb1dfedb"},
{"id":3,"parent_board":1,"title":"Lorem 1-1","description":"6062bc28a9f781e06417d"}]
可以看到board id 3是board id 1的子板,因为它的parent_board
值被设置为1。
我希望收到以下输出:
- Lorem 1
- Lorem 1 - 1
- Lorem 2
但这是我的结果:
- Lorem 1
- Lorem 2
- Lorem 1 - 1
我如何循环这个对象,使子板(板3)将低于板1?
我使用<ul>
和<li>
标签。
var html = "</ul>";
for(var i = 0; i < boards.length; i++){
if(boards[i].parent_board == 0){
html += "<li>" + boards[i].title + "</li>";
}else{
html += "<ul>";
html += "<li>" + boards[i].title + "</li>";
html += "</ul>";
}
}
我会在每个板的<li>
上放置ID属性。然后,每当我遍历子板时,我只需将新项目附加为具有匹配id的父元素的子元素,要做到这一点,您必须在遇到每个元素时创建并添加到文档中,而不是首先将它们存储在字符串中。
var htmlElem = document.getElementById('htmlElemId');
htmlElem.innerHTML = "";
for(var i = 0; i < boards.length; i++){
if(boards[i].parent_board == 0){
htmlElem.innerHTML += "<li id='" + boards[i].id + "'>" + boards[i].title + "</li>";
}else{
var parent = document.getElementById(boards[i].parent_board);
if (parent){
parent.innerHTML += "<ul><li id='" + boards[i].id + "'>" + boards[i].title + "</li></ul>";
}
}
}
将'htmlElemId'替换为容器元素的实际id,并确保其类型为<ul>
。
编辑:你可能还想考虑在你的ID中使用某种前缀,所以你不只是使用可能与其他地方的东西冲突的普通数字
"<li id='SomePrefix-" + boards[i].id + "'>" + boards[i].title + "</li>"
var parent = document.getElementById("SomePrefix-" + boards[i].parent_board);
EDIT2:这里是一个JSFiddle
相关文章:
- 循环遍历以数组为值的Javascript对象
- 遍历类元素数组,并在jquery中选择同级元素
- Jquery遍历表元素
- Chrome扩展:遍历不同的页面并收集数据
- 遍历 DOM 按顺序离开
- 节点.js遍历按字母顺序递归的目录
- 循环遍历 json 对象并按顺序排序
- javascript 是否保证枚举同一对象两次将以相同的顺序遍历字段
- 如何按顺序遍历DOM
- 按顺序遍历孩子们
- 循环遍历对象和顺序子值
- 如何以一致的顺序遍历对象的键?
- 为什么DOM树顺序优先,深度优先遍历
- JavaScript DOM遍历顺序
- 解释这个DOM遍历顺序
- 一般树后顺序遍历
- JavaScript-图形遍历-从起始节点开始按顺序(最接近的第一个)获取节点
- 在不更改顺序的情况下遍历已存在的对象
- jQuery遍历顺序-深度优先
- 在querySelector:如何获得第一个和最后一个元素?dom中使用的遍历顺序