Question

我试图将json数据显示到html表中，schoolClasseName用作表标题（th），而属于特定schoolClass的学生（student firstName）位于表标题下的一列中-schoolClassName。 / p>

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 tr来构建新的td。

Answer 1

如果我正确理解了您的问题，那么问题在于代码仅创建了一行并附加了许多td单元格，并且您需要将每个student数组放入新行中。

您只需要在映射内部tr之前添加开头schoolClasses，之后再添加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>

如何将数据从JSON显示到html表中

1 个答案: