动态创建嵌套列表项
动态创建嵌套列表项
提问于 2019-05-22 02:45:40
获取如下所示的JSON数据。我想使用js动态创建一个嵌套列表(ul-li)。
[
{
"code": "A00",
"depth": "0",
"row": [
{
"code": "A001",
"depth": "1",
"disease": "Cholera due to Vibrio cholerae 01, biovar eltor"
},
{
"code": "A009",
"depth": "1",
"disease": "Cholera, unspecified"
}
],
"disease": "Cholera",
"title": "a"
},
{
"code": "A01",
"depth": "0",
"row": [
{
"code": "A0103",
"depth": "1",
"disease": "Typhoid pneumonia"
}
],
"disease": "Typhoid and paratyphoid fevers",
"title": "a"
},
{
"code": "A010",
"depth": "0",
"row": [
{
"code": "A0102",
"depth": "1",
"disease": "Typhoid fever with heart involvement"
},
{
"code": "A0103",
"depth": "1",
"disease": "Typhoid pneumonia"
},
{
"code": "A0104",
"depth": "1",
"disease": "Typhoid arthritis"
},
{
"code": "A014",
"depth": "1",
"disease": "Paratyphoid fever, unspecified"
}
],
"disease": "Typhoid fever",
"title": "b"
},
{
"code": "A02",
"depth": "0",
"row": [
{
"code": "A020",
"depth": "1",
"disease": "Salmonella enteritis"
},
{
"code": "A021",
"depth": "1",
"disease": "Salmonella sepsis"
}
],
"disease": "Other salmonella infections",
"title": "b"
},
{
"code": "A022",
"depth": "0",
"row": [
{
"code": "A0221",
"depth": "1",
"disease": "Salmonella meningitis"
},
{
"code": "A0224",
"depth": "1",
"disease": "Salmonella osteomyelitis"
},
{
"code": "A0225",
"depth": "1",
"disease": "Salmonella pyelonephritis"
},
{
"code": "A0229",
"depth": "1",
"disease": "Salmonella with other localized infection"
}
],
"disease": "Localized salmonella infections",
"title": "c"
}
]
json被缩短，标题被更改以提高可读性。我想实现像这样的东西
a
Cholera due to Vibrio cholerae 01, biovar eltor
Cholera due to Vibrio cholerae 01, biovar eltor
Typhoid pneumonia
b
Typhoid fever with heart involvement
..具有相同值的标题所有行数据都应该出现在相同的列表标题中。标题不能重复。取而代之的是具有相同标题的对象，它的行(键)数据应该出现在列表中，如上图所示。
下面是我到目前为止已经尝试过的内容
for (let i = 0; i < json.length; i++) {
let list = document.createElement('li');
let ulist = document.createElement('ul');
let span = document.createElement('span');
span.appendChild(document.createTextNode(json[i].title));
for (let j = 0; j < json[i].row.length; j++) {
let nestedList = document.createElement('li');
span.classList.add('caret');
list.appendChild(span);
ulist.classList.add('nested');
list.appendChild(ulist);
nestedList.appendChild(document.createTextNode(json[i].row[j].desease));
ulist.appendChild(nestedList);
}
let mainUl = document.getElementById('someId');
mainUl.appendChild(list)
}
这就是我得到的结果(示例结果)，但没有成功获得所需的结果
a
xyz
a
abc
b
...
b
...如果您需要更多信息或我不清楚，请告诉我。提前感谢
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-05-22 03:14:33
这里有一个这样做的例子。
var json = [
{
"code": "A00",
"depth": "0",
"row": [
{
"code": "A001",
"depth": "1",
"disease": "Cholera due to Vibrio cholerae 01, biovar eltor"
},
{
"code": "A009",
"depth": "1",
"disease": "Cholera, unspecified"
}
],
"disease": "Cholera",
"title": "a"
},
{
"code": "A01",
"depth": "0",
"row": [
{
"code": "A0103",
"depth": "1",
"disease": "Typhoid pneumonia"
}
],
"disease": "Typhoid and paratyphoid fevers",
"title": "a"
},
{
"code": "A010",
"depth": "0",
"row": [
{
"code": "A0102",
"depth": "1",
"disease": "Typhoid fever with heart involvement"
},
{
"code": "A0103",
"depth": "1",
"disease": "Typhoid pneumonia"
},
{
"code": "A0104",
"depth": "1",
"disease": "Typhoid arthritis"
},
{
"code": "A014",
"depth": "1",
"disease": "Paratyphoid fever, unspecified"
}
],
"disease": "Typhoid fever",
"title": "b"
},
{
"code": "A02",
"depth": "0",
"row": [
{
"code": "A020",
"depth": "1",
"disease": "Salmonella enteritis"
},
{
"code": "A021",
"depth": "1",
"disease": "Salmonella sepsis"
}
],
"disease": "Other salmonella infections",
"title": "b"
},
{
"code": "A022",
"depth": "0",
"row": [
{
"code": "A0221",
"depth": "1",
"disease": "Salmonella meningitis"
},
{
"code": "A0224",
"depth": "1",
"disease": "Salmonella osteomyelitis"
},
{
"code": "A0225",
"depth": "1",
"disease": "Salmonella pyelonephritis"
},
{
"code": "A0229",
"depth": "1",
"disease": "Salmonella with other localized infection"
}
],
"disease": "Localized salmonella infections",
"title": "c"
}
];
function buildList(json) {
var list = {}
//Loop over the json object and build our new object
for(var k in json){
//Grab the title
var group = json[k].title;
//Check to see if our new title has this key
if(!(group in list)){
//If not, initialize it as an array
list[group] = [];
}
//Add all the row.disease entries to the array
for(var x in json[k].row){
list[group].push(json[k].row[x].disease);
}
}
//Build the html
var html = '';
//Itterate over our new list
for(var x in list) {
//Add the title key
html += '<li>' + x;
//Check to make sure the array isn't empty
if(list[x] != []){
//Add the nested ul
html += '<ul>';
//ITterate over the items for this key and add li
for(var item in list[x]) {
html += '<li>' + list[x][item] + '</li>';
};
//Close the ul
html += '</ul>';
}
//close the li
html += '</li>';
}
$('#main').html(html);
}
buildList(json);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main"></ul>
Stack Overflow用户
发布于 2019-05-22 03:02:38
这是一个基于数据的递归构建，它将支持任何深度。
const data = [
{
"code": "A00",
"depth": "0",
"row": [
{
"code": "A001",
"depth": "1",
"disease": "Cholera due to Vibrio cholerae 01, biovar eltor"
},
{
"code": "A009",
"depth": "1",
"disease": "Cholera, unspecified"
}
],
"disease": "Cholera",
"title": "a"
},
{
"code": "A01",
"depth": "0",
"row": [
{
"code": "A0103",
"depth": "1",
"disease": "Typhoid pneumonia"
}
],
"disease": "Typhoid and paratyphoid fevers",
"title": "a"
},
{
"code": "A010",
"depth": "0",
"row": [
{
"code": "A0102",
"depth": "1",
"disease": "Typhoid fever with heart involvement"
},
{
"code": "A0103",
"depth": "1",
"disease": "Typhoid pneumonia"
},
{
"code": "A0104",
"depth": "1",
"disease": "Typhoid arthritis"
},
{
"code": "A014",
"depth": "1",
"disease": "Paratyphoid fever, unspecified"
}
],
"disease": "Typhoid fever",
"title": "b"
},
{
"code": "A02",
"depth": "0",
"row": [
{
"code": "A020",
"depth": "1",
"disease": "Salmonella enteritis"
},
{
"code": "A021",
"depth": "1",
"disease": "Salmonella sepsis"
}
],
"disease": "Other salmonella infections",
"title": "b"
},
{
"code": "A022",
"depth": "0",
"row": [
{
"code": "A0221",
"depth": "1",
"disease": "Salmonella meningitis"
},
{
"code": "A0224",
"depth": "1",
"disease": "Salmonella osteomyelitis"
},
{
"code": "A0225",
"depth": "1",
"disease": "Salmonella pyelonephritis"
},
{
"code": "A0229",
"depth": "1",
"disease": "Salmonella with other localized infection"
}
],
"disease": "Localized salmonella infections",
"title": "c"
}
];
const buildLI = (data) => {
const li = document.createElement('li');
const span = document.createElement('span');
span.innerHTML = `code: ${data.code} - ${data.disease}`;
li.appendChild(span);
if(data.row) li.appendChild(buildUL(data.row));
return li;
};
const buildUL = (data) => {
const ul = document.createElement('ul');
data.forEach(d => {
ul.appendChild(buildLI(d));
});
return ul;
};
document.querySelector('div').appendChild(buildUL(data));<div></div>
Stack Overflow用户
发布于 2019-05-22 03:15:42
现有答案的替代方案是:如果您希望代码具有更好的可读性，您只需创建一个字符串并通过innerHTML将其附加到容器中即可。对于简单的任务，更直接、更容易维护。
let html = '';
items.forEach(item => {
html += `
<ul>
<li>${item.code}</li>
<li>
<ul>`;
item.row.forEach(row => {
html += `<li>${row.disease}</li>`;
});
html += `
</ul>
</li>
</ul>`;
});
console.log(html);
document.querySelector('#my-wrapper').innerHTML = html;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56244624
复制相关文章
相似问题