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

冷不防 2023-10-01 16:33 50阅读 0赞

[如您所知， JSON 或 JavaScript Object Notation][JSON _ JavaScript Object Notation]是一种简单易懂的数据格式。JSON 是轻量级且独立于语言的，这就是它通常与[jQuery Ajax 一起用于传输数据][jQuery Ajax]的原因。在本文中，我将向您展示如何使用 JavaScript将 JSON 数据[动态转换为 HTML 表格。][HTML]此外，您将了解如何使用[createElement() 方法][createElement_]在 JavaScript 中动态创建表。

![0ca542b237c8eb327a4aeb43748050b5.png][]

**注意**：您还可以[使用 jQuery 将数据从 JSON 文件转换为 HTML 表][jQuery _ JSON _ HTML]，并且使用此过程，您可以使用 jQuery 或 JavaScript[创建简单的 CRUD 应用程序。][CRUD]

此示例的 JSON 如下所示。

[
        {
            "Book ID": "1",
            "Book Name": "Computer Architecture",
            "Category": "Computers",
            "Price": "125.60"
        },
        {
            "Book ID": "2",
            "Book Name": "Asp.Net 4 Blue Book",
            "Category": "Programming",
            "Price": "56.00"
        },
        {
            "Book ID": "3",
            "Book Name": "Popular Science",
            "Category": "Science",
            "Price": "210.40"
        }
    ]

上面的 JSON 有一个包含三个不同书籍的数组，它们的 ID、名称、所属的类别和价格。我的演示只有三个记录。您可以添加更多。我希望读取 JavaScript 中的 JSON 数据，获取 <table> 标题的列（书籍 ID、书籍名称等）以及相应标题的值。检查下面的图像。

**标记**

在标记部分，我有一个输入类型按钮来调用 JavaScript 函数，该函数将提取 JSON 数据，动态创建带有标题和行的 <table>，最后在其中填充数据。我还有 DIV 元素，它将作为我们表格的容器。填充数据后，我会将<table>附加到 <div>。

<!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() {
            var myBooks = [
                {
                    "Book ID": "1",
                    "Book Name": "Computer Architecture",
                    "Category": "Computers",
                    "Price": "125.60"
                },
                {
                    "Book ID": "2",
                    "Book Name": "Asp.Net 4 Blue Book",
                    "Category": "Programming",
                    "Price": "56.00"
                },
                {
                    "Book ID": "3",
                    "Book Name": "Popular Science",
                    "Category": "Science",
                    "Price": "210.40"
                }
            ]
    
            // EXTRACT VALUE FOR HTML 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 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 < 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]];
                }
            }
    
            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("showData");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
        }
    </script>
    </html>

我提到的 JSON 数据存储在一个名为myBooks的数组中。结构非常简单，您可以向其中添加更多数据。

[JSON _ JavaScript Object Notation]: https://www.encodedna.com/category/json/
[jQuery Ajax]: https://www.encodedna.com/2014/07/extract-and-read-data-from-xml-using-jquery-ajax.htm
[HTML]: https://www.encodedna.com/html-generators/html-table-generator.htm
[createElement_]: https://www.encodedna.com/javascript/dynamically-create-html-elements-using-createElement-method.htm
[0ca542b237c8eb327a4aeb43748050b5.png]: https://img-blog.csdnimg.cn/img_convert/0ca542b237c8eb327a4aeb43748050b5.png
[jQuery _ JSON _ HTML]: https://www.encodedna.com/jquery/read-json-file-push-data-into-array-and-convert-to-html-table-using-jquery.htm
[CRUD]: https://www.encodedna.com/javascript/how-to-create-a-simple-crud-application-using-only-javascript.htm