获取如下 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
...
如果需要更多信息或者我不清楚，请告诉我。 提前致谢
最佳答案
以下是一种方法的示例。
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>关于javascript - 动态创建嵌套列表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56244624/