如何将 JSON 中的数据显示到 html 表中
Posted
技术标签:
【中文标题】如何将 JSON 中的数据显示到 html 表中【英文标题】：How to display data from JSON into html table 【发布时间】：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。
【问题讨论】：
欢迎堆栈溢出。您能否详细说明问题所在？ 【参考方案1】：如果我正确理解了您的问题，问题是代码只创建了一行并附加了许多 td 单元格，并且您需要将每个 student 数组放在一个新行中。
您只需要在映射内部schoolClasses 之前添加开头tr 并在之后添加关闭tr。我还添加了 .join('') 以删除附加到 HTML 中的逗号 ,。 （我还将 json 数组命名为 "grades" 以使 json 在此示例中有效）。
请参阅下面的 sn-p。
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>【讨论】：
请稍等，一行中的名称需要在 SchoolClass Name 下的列中，例如在 FifthThree 中：Svetislav, Gavrilo, Milos, Marko.. 我发布图片以获得更多帮助 问题是json结构。您正在尝试将 4 个名称放入 3 列中。你需要一个额外的“fifthFour”部分来做到这一点。 json需要是那种格式吗？ 是的，那是格式，我无法编辑 json，您有什么建议可以显示学生的成绩和学校班级，不需要在表格中。 我只需要那个学校班级名称和属于那个学校班级的学生下的年级编号，我希望你理解主要目标。以上是关于如何将 JSON 中的数据显示到 html 表中的主要内容，如果未能解决你的问题，请参考以下文章
如何将数据库中的一个表中的字段拿出几个封装成json，用于页面显示？
使用Vue Javascript将JSON数据提取到html文件中的表中的问题