我试图将 json 数据显示到 html 表中，schoolClasseName 显示为表头(th)，属于特定 schoolClass 的学生(学生名字)显示在表头下的一列中 - schoolClassName。
showGrades = (myJson) => {
console.log(myJson);
var cardContainer = document.getElementById('card-holder');
console.log(cardContainer)
cardContainer.style.display = "none";
var contentSection = document.getElementById("content-section");
console.log(contentSection)
var para = document.createElement("div");
para.className += "studentsFromDb";
contentSection.appendChild(para);
var t = "";
myJson.forEach(element => {
var container = "<div>"
container += "<h1> Grade Number" + element.gradeNumber + "</h1>"
container += "<table><tr>" + element.schoolClasses.map((el) => {
return "<th>" + el.schoolClassName + "</th>"
}) + "</tr>" + element.schoolClasses.map((el) => {
return el.students.map((el) => {
return "<td>" + el.firstName + "</td>"
})
}) + "</table>"
container += "</div>";
t += container;
});
para.innerHTML += t;
}
My JSon file:
[
{
"schoolClasses": [
{
"students": [
{
"firstName": "Svetislav"
},
{
"firstName": "Gavrilo"
},
{
"firstName": "Milos"
},
{
"firstName": "Marko"
}
],
"id": 1,
"schoolClassName": "fifthThree",
"gradeId": 1
},
{
"students": [
{
"firstName": "Mladen"
},
{
"firstName": "Zoran"
},
{
"firstName": "Boban"
},
{
"firstName": "Goran"
}
],
"id": 2,
"schoolClassName": "fifthOne",
"gradeId": 1
},
{
"students": [
{
"firstName": "Milovan"
},
{
"firstName": "Jorgovan"
},
{
"firstName": "Jovan"
}
],
"id": 3,
"schoolClassName": "fifthTwo",
"gradeId": 1
}
],
"id": 1,
"gradeNumber": 5
},
grade 6
{
"schoolClasses": [
{
"students": [
{
"firstName": "Branimir"
},
{
"firstName": "Stanislava"
},
{
"firstName": "Zorana"
},
{
"firstName": "Zvezdana"
}
],
"id": 4,
"schoolClassName": "sixthOne",
"gradeId": 2
},
{
"students": [
{
"firstName": "Dragana"
},
{
"firstName": "Ivana"
},
{
"firstName": "Mirjana"
},
{
"firstName": "Milica"
}
],
"id": 5,
"schoolClassName": "sixthTwo",
"gradeId": 2
},
{
"students": [
{
"firstName": "Marijana"
},
{
"firstName": "Dobrila"
},
{
"firstName": "Marija"
},
{
"firstName": "Dobrila"
}
],
"id": 6,
"schoolClassName": "sixthThree",
"gradeId": 2
},
{
"students": [
{
"firstName": "Svetislava"
},
{
"firstName": "Milica"
},
{
"firstName": "Zlatija"
},
{
"firstName": "Serafina"
}
],
"id": 7,
"schoolClassName": "sixthFour",
"gradeId": 2
}
],
"id": 2,
"gradeNumber": 6
}
]
我有 3 个 th 但我有更多数据，它是这样的
FirstSchoolClass SecondSchoolClass ThirdSchoolClass
Michael Stefany Monica Stephan Mike Taylor etc ..
我需要在 3 个 td 之后用 3 个 td 构建新的 tr。
最佳答案
如果我没有正确理解你的问题，问题是代码只创建一行并附加许多 td 单元格，你需要每个 student 数组排在新的一行。
您只需要在映射内部 schoolClasses 之前添加打开 tr 并在之后添加关闭 tr 。我还添加了 .join('') 以删除附加到 HTML 的逗号 ,。 (我还将 json 数组命名为 “grades” 以使 json 在此示例中有效)。
请参阅下面的代码段。
showGrades = (myJson) => {
var cardContainer = document.getElementById('card-holder');
cardContainer.style.display = "none";
var contentSection = document.getElementById("content-section");
var para = document.createElement("div");
para.className += "studentsFromDb";
contentSection.appendChild(para);
var t = "";
myJson["grades"].forEach(element => {
var container = "<div>";
container += "<h1> Grade Number" + element.gradeNumber + "</h1>";
container += "<table><tr>" + element.schoolClasses.map((el) =>
{
return "<th>" + el.schoolClassName + "</th>"
}).join('') + "</tr><tr>" + element.schoolClasses.map((el) =>
{ // added tr here ^^
return el.students.map((el) =>
{
return "<td>" + el.firstName + "</td>"
}).join('') + "</tr>"; // added join('') and '</tr>'
}).join('') + "</table>"; // added join('')
container += "</div>";
t += container;
});
para.innerHTML += t;
}
var json = {
"grades": [{
"schoolClasses": [{
"students": [
{
"firstName": "Svetislav"
}, {
"firstName": "Gavrilo"
}, {
"firstName": "Milos"
}, {
"firstName": "Marko"
}
],
"id": 1,
"schoolClassName": "fifthThree",
"gradeId": 1
}, {
"students": [
{
"firstName": "Mladen"
}, {
"firstName": "Zoran"
}, {
"firstName": "Boban"
}, {
"firstName": "Goran"
}
],
"id": 2,
"schoolClassName": "fifthOne",
"gradeId": 1
}, {
"students": [{
"firstName": "Milovan"
}, {
"firstName": "Jorgovan"
}, {
"firstName": "Jovan"
}
],
"id": 3,
"schoolClassName": "fifthTwo",
"gradeId": 1
}
],
"id": 1,
"gradeNumber": 5
}, {
"schoolClasses": [{
"students": [{
"firstName": "Branimir"
}, {
"firstName": "Stanislava"
}, {
"firstName": "Zorana"
}, {
"firstName": "Zvezdana"
}
],
"id": 4,
"schoolClassName": "sixthOne",
"gradeId": 2
}, {
"students": [{
"firstName": "Dragana"
}, {
"firstName": "Ivana"
}, {
"firstName": "Mirjana"
}, {
"firstName": "Milica"
}
],
"id": 5,
"schoolClassName": "sixthTwo",
"gradeId": 2
}, {
"students": [{
"firstName": "Marijana"
}, {
"firstName": "Dobrila"
}, {
"firstName": "Marija"
}, {
"firstName": "Dobrila"
}
],
"id": 6,
"schoolClassName": "sixthThree",
"gradeId": 2
}, {
"students": [{
"firstName": "Svetislava"
}, {
"firstName": "Milica"
}, {
"firstName": "Zlatija"
}, {
"firstName": "Serafina"
}
],
"id": 7,
"schoolClassName": "sixthFour",
"gradeId": 2
}
],
"id": 2,
"gradeNumber": 6
}
]
}
// run code
showGrades(json);<div id="content-section"></div>
<div id="card-holder"></div>关于javascript - 如何将 JSON 中的数据显示到 html 表中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58249541/