【发布时间】：2020-02-03 13:37:47
【问题描述】：
我试图将 json 数据显示到 html 表中，schoolClasseName 是表头（th），属于特定 schoolClass 的学生（student firstName）在表头 - 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。
【问题讨论】：
-
欢迎堆栈溢出。您能否详细说明问题所在？
标签： javascript html arrays json reactjs