如何将JSON数据显示在HTML表格中

Question

我正在尝试将JSON数据显示到HTML表格中，其中schoolClasseName应为表头（th），属于特定schoolClass的学生（学生名字）应在表头 - schoolClassName下的列中。{{link1：}}

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
    }
]

我有三个 th 但我有更多的数据，它是这样的。

FirstSchoolClass SecondSchoolClass ThirdSchoolClass 
Michael          Stefany           Monica          Stephan Mike Taylor etc ..

我需要在每隔3个 td 后建立一个新的 tr，其中包含3个 td。

- Boban Jankovic

---

欢迎来到Stack Overflow。您能详细说明一下问题是什么吗？ - haldo

Answer 1

如果我正确理解了您的问题，问题在于代码只创建了一行并附加了许多单元格，而您需要每个数组都在新行中。 您只需要在内部映射之前添加开放，并在之后添加关闭。 我还添加了.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>

- haldo

---

请稍等，排列在一行的姓名需要在“班级名称”下面排成一列，例如在fifthThree中：Svetislav，Gavrilo，Milos，Marko... - Boban Jankovic

我会发一张图片以获得更多帮助。 - Boban Jankovic

问题在于JSON结构。您试图将4个名称放入3列中。您需要一个额外的“fifthFour”部分来完成这个任务。JSON需要以那种格式吗？ - haldo

是的，那就是格式，我无法编辑JSON，你有什么建议如何显示学生的成绩和学校班级，它不需要在表格中。 - Boban Jankovic

我只需要在班级名称下面列出年级号，再在该班级下面列出属于该班级的学生。希望你理解主要目标。 - Boban Jankovic

我用 tr 和 display flex，flex-direction:column 得到了我想要的结果，但这并不是最好的解决方案。 - Boban Jankovic