Передача объекта JSON в таблицу с Javascript, в убыток

Question

Я пытаюсь передать объект массива json со своего сервера на мою страницу в виде таблицы для домашнего задания.Я не могу заставить цикл работать.

Я попробовал цикл, который создал кучу пустых таблиц в консоли.Что-то определенно не так.массив JSON:

{
    "degrees":[
        {
            "degree":{
                "School": "Dutchess Community College",
                "Program": "Humanities",
                "Type": "Associate of Arts",
                "Year": "2009"
            }
        },
        {
            "degree":{
                "School": "Binghamton University",
                "Program": "English Literature",
                "Type": "Bachelor of Arts",
                "Year": "2011"

ETC.

Желаемый вывод - простая таблица, поэтому:

       School    |     Program      |    Type                |Year
dutchesscommunity college  Humanities    associate of arts        2009
Binghamton                English Lit    Bachelor of arts         2011

const getDegrees = () => {
    const xhr = new XMLHttpRequest();
    xhr.open('get', 'data/degrees.json', true);
    xhr.onreadystatechange = function() {
        if ( (xhr.readyState === 4) && (xhr.status === 200) ) {
            const response = JSON.parse(xhr.responseText);

            const table = document.createElement("TABLE");
            table.setAttribute("id", "myTable");
            document.body.appendChild(table);


            var degrees = response.degrees;
            var degreeHeaders = Object.keys(degrees[0].degree);    

            var headerRow = document.createElement("TR");
            headerRow.setAttribute("id", "myTr");
            table.appendChild(headerRow);

           for (let i = 0; i < degreeHeaders.length; i++) {
                const headerCell = document.createElement("th");
                headerCell.innerText = degreeHeaders[i]; 
                headerRow.appendChild(headerCell);
            }


            for (let i = 0; i < degrees.length; i++) {

                let degreeData = degrees[i].degree;
                let tr = document.createElement("TR");
                table.appendChild(tr);


                for (let column = 0; column < degreeHeaders.length; column++) {
                    const columnProperty = degreeHeaders[column];
                    let td = document.createElement("td");
                    tr.appendChild(td);
                    td.innerHTML = degreeData[columnProperty];
                }
            }
        }

    }
};            
const btn = document.querySelector('button');
btn.addEventListener('click', getDegrees);

АЛЬТЕРНАТИВНО

const btn = document.querySelector('button');


const getDegrees = () => {
    const xhr = new XMLHttpRequest();
    xhr.open('get', 'data/degrees.json', true);
    xhr.onreadystatechange = function() {
        if ( (xhr.readyState === 4) && (xhr.status === 200) ) {
            const response = JSON.parse(xhr.responseText);
            function createTr(line, i) {
                var y = document.createElement("TR");
                 y.setAttribute("id", "myTr" + i);
                 var school = document.createElement("TD");
                 school.innerHTML = line['School'];
                 var program = document.createElement("TD");
                 program.innerHTML = line['Program'];
                 var type = document.createElement("TD");
                 type.innerHTML = line['Type'];
                 var year = document.createElement("TD");
                 year.innerHTML = line['Year'];
                 y.appendChild(school);
                 y.appendChild(program);
                 y.appendChild(type);
                 y.appendChild(year);
                 return y;
          }

         function getDegrees() {
             var x = document.createElement("TABLE");
             x.setAttribute("id", "myTable");
             document.body.appendChild(x);

             x.append(createTr({"School": "School",
                         "Program": "Program",
                         "Type": "Type",
                         "Year": "Year" }, 0));
             for (var i = 0; i < response['degrees'].length; i++) {
                 var line = response['degrees'][i]['degree'];    
                 var tr = createTr(line, i);
                 x.appendChild(tr);
             }        

         };
        }
    }
}
btn.addEventListener('click', getDegrees);

Answer 1

Вот простое решение для того, что вы хотите:

var json = {
    "degrees":[
        {
            "degree":{
                "School": "Dutchess Community College",
                "Program": "Humanities",
                "Type": "Associate of Arts",
                "Year": "2009"
            }
        },
        {
            "degree":{
                "School": "Binghamton University",
                "Program": "English Literature",
                "Type": "Bachelor of Arts",
                "Year": "2011"
           }
        } ]
};

function createTr(line, i) {
       var y = document.createElement("TR");
        y.setAttribute("id", "myTr" + i);
        var school = document.createElement("TD");
        school.innerHTML = line['School'];
        var program = document.createElement("TD");
        program.innerHTML = line['Program'];
        var type = document.createElement("TD");
        type.innerHTML = line['Type'];
        var year = document.createElement("TD");
        year.innerHTML = line['Year'];
        y.appendChild(school);
        y.appendChild(program);
        y.appendChild(type);
        y.appendChild(year);
        return y;
 }

function getDegrees() {
    var response = json;
    var x = document.createElement("TABLE");
    x.setAttribute("id", "myTable");
    document.body.appendChild(x);

    x.append(createTr({"School": "School",
                "Program": "Program",
                "Type": "Type",
                "Year": "Year" }, 0));
    for (var i = 0; i < response['degrees'].length; i++) {
        var line = response['degrees'][i]['degree'];    
        var tr = createTr(line, i);
        x.appendChild(tr);
    }        
    
};

btn.addEventListener('click', getDegrees);

<div id='res'>
</div>
<button id="btn" >Get Degrees</button>

Answer 2

Один из вариантов - получить список имен столбцов на основе свойств первой степени. (Предполагается, что все градусы будут иметь те же свойства, что и эта строка)

Создайте строку заголовка и добавьте эти свойства как «ячейки заголовка».

Затем выполните цикл по всем градусам, добавьте строку для градуса и добавьте ячейку для каждого из столбцов заголовка со значением градусов для этого свойства.

См. Пример ниже (Он вырезает часть запроса вашего javascript, но должен вести себя так же.

<html>

<head>
</head>

<body>
    <button>Load Data</button>
    <script type="text/javascript">
        function getDegrees() {
            const response = {
                "degrees": [
                    {
                        "degree": {
                            "School": "Dutchess Community College",
                            "Program": "Humanities",
                            "Type": "Associate of Arts",
                            "Year": "2009"
                        }
                    },
                    {
                        "degree": {
                            "School": "Binghamton University",
                            "Program": "English Literature",
                            "Type": "Bachelor of Arts",
                            "Year": "2011"
                        }
                    }
                ]
            };

            // Create the table
            const table = document.createElement("TABLE");
            table.setAttribute("id", "myTable");
            document.body.appendChild(table);

            // Get the firest degree element, and get the headers from it
            var degrees = response.degrees;
            var degreeHeaders = Object.keys(degrees[0].degree); // i.e. this will be an array of ["School", "Program", "Type" "Year"]

            // Create a row for the headers
            var headerRow = document.createElement("TR");
            headerRow.setAttribute("id", "myTr");
            table.appendChild(headerRow);

            // Add a cell for each of the 'columns' based on the properties that we will display
            for (let i = 0; i < degreeHeaders.length; i++) {
                const headerCell = document.createElement("th");
                headerCell.innerText = degreeHeaders[i]; 
                headerRow.appendChild(headerCell);
            }

            // Loop over each of the degree elements
            for (let i = 0; i < degrees.length; i++) {

                // Build a row element and add it to the table
                let degreeData = degrees[i].degree;
                let tr = document.createElement("TR");
                table.appendChild(tr);

                // For each 'Header' property, build a cell and add it to the current degree's row
                for (let column = 0; column < degreeHeaders.length; column++) {
                    const columnProperty = degreeHeaders[column]; // This is the propery for the column i.e.  ["School", "Program", "Type" "Year"]
                    let td = document.createElement("td");
                    tr.appendChild(td);
                    td.innerHTML = degreeData[columnProperty];
                }
            }
        }
        const btn = document.querySelector('button');
        btn.addEventListener('click', getDegrees);
    </script>
</body>

</html>