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

最新推荐文章于 2023-11-22 17:16:53 发布

allway2

最新推荐文章于 2023-11-22 17:16:53 发布

阅读量615

点赞数

文章标签： javascript json html

本文链接：https://blog.csdn.net/allway2/article/details/122701117

版权

<!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>

allway2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 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 .
复制链接

扫一扫