javascript - 用Javascript将JSON对象传递给表，不知所措

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"

等等。

所需的输出是一个简单的表格，因此：

       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);

标签： javascripthtmljsonparsing

Answer 1

一种选择是根据第一级的属性获取“列”名称列表。（这假设所有度数都将具有与该行相同的属性）

创建一个“标题行”并将这些属性添加为“标题单元格”。

然后，遍历每个度数，为度数添加一行，并为每个标题列添加一个单元格，其中包含该属性的度数值。

请参阅下面的示例（它会删除您 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>