使用 JavaScript 将Fetch JSON 数据动态转换为 HTML 表-蒲公英云

使用 JavaScript 将Fetch JSON 数据动态转换为 HTML 表

<!DOCTYPE html>
<html>
    <head>
        <title>Convert JSON Data to HTML Table</title>
        <style>
            th, td, p, input {
                font:14px Verdana;
            }
            table, th, td
            {
                border: solid 1px #DDD;
                border-collapse: collapse;
                padding: 2px 3px;
                text-align: center;
            }
            th {
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
        <p id="showData"></p>
    </body>
    <script>
        function CreateTableFromJSON() {
            fetch("http://dummy.restapiexample.com/api/v1/employees").then(
                    res => {
                        res.json().then(
                                data => {
                                    console.log(data.data);
                                    if (data.data.length > 0) {
                                        // EXTRACT VALUE FOR HTML HEADER. 
                                        // ('Book ID', 'Book Name', 'Category' and 'Price')
                                        var col = [];
                                        for (var i = 0; i < data.data.length; i++) {
                                            for (var key in data.data[i]) {
                                                if (col.indexOf(key) === -1) {
                                                    col.push(key);
                                                }
                                            }
                                        }
                                        // CREATE DYNAMIC TABLE.
                                        var table = document.createElement("table");
                                        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
                                        var tr = table.insertRow(-1);                   // TABLE ROW.
                                        for (var i = 0; i < col.length; i++) {
                                            var th = document.createElement("th");      // TABLE HEADER.
                                            th.innerHTML = col[i];
                                            tr.appendChild(th);
                                        }
                                        // ADD JSON DATA TO THE TABLE AS ROWS.
                                        for (var i = 0; i < data.data.length; i++) {
                                            tr = table.insertRow(-1);
                                            for (var j = 0; j < col.length; j++) {
                                                var tabCell = tr.insertCell(-1);
                                                tabCell.innerHTML = data.data[i][col[j]];
                                            }
                                        }
                                        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
                                        var divContainer = document.getElementById("showData");
                                        divContainer.innerHTML = "";
                                        divContainer.appendChild(table);
                                    }
                                }
                        )
                    }
            )
        }
    </script>
</html>