如何使用节点 js 从 json 文件构建 html 表？ [复制]答案

【问题标题】：How to build html table from json file using node js? [duplicate]如何使用节点 js 从 json 文件构建 html 表？ [复制]
【发布时间】：2022-02-08 01:34:30
【问题描述】：

如何使用 node js 从 json 文件构建 html 表？我有一个 JSON 文件，我想在 html 文档中显示它，我该怎么做？

【问题讨论】：

标签： javascript html node.js

【解决方案1】：

试试这个：

<!DOCTYPE html>
<html>
<head>
    <title>Convert JSON Data to HTML Table</title>
    <style>
        th, td, p, input, h3 {
            font:15px 'Segoe UI';
        }
        table, th, td {
            border: solid 1px #ddd;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>
<body>
    <h3>
        Click the button to create a dynamic table using data extracted from a JSON array.
    </h3>
    <input type='button' onclick='tableFromJson()' 
        value='Create Table from JSON data' />
        
    <p id='showData'></p>
    
    <p id='msg'></p>
</body>

<script>
    // scroll down for ES6 features. 

    // using regular methods.

    function tableFromJson() {
        // the json data. (you can change the values for output.)
        var myBooks = [
            {'Book ID': '1', 'Book Name': 'Challenging Times',
                'Category': 'Business', 'Price': '125.60'
            },
            {'Book ID': '2', 'Book Name': 'Learning JavaScript',
                'Category': 'Programming', 'Price': '56.00'
            },
            {'Book ID': '3', 'Book Name': 'Popular Science',
                'Category': 'Science', 'Price': '210.40'
            }
        ]

        // Extract value from table header. 
        // ('Book ID', 'Book Name', 'Category' and 'Price')
        var col = [];
        for (var i = 0; i < myBooks.length; i++) {
            for (var key in myBooks[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // Create a table.
        var table = document.createElement("table");

        // Create 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 < myBooks.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myBooks[i][col[j]];
            }
        }

        // Now, add the newly created table with json data, to a container.
        var divShowData = document.getElementById('showData');
        divShowData.innerHTML = "";
        divShowData.appendChild(table);
        
       
    }
    
    

</script>
</html>

【讨论】：

此方法不适用于不平衡的 json 数据。条目中不同数量的字段、不同类型的字段、嵌套值等会破坏您的代码