如何在 html 中插入本地 json 文件

Question

您好，在下面的代码中，我想手动加载本地 JSON 文件而不是数据，我希望我的代码从文件中读取所有数据并显示在 HTML 表中。 我的 JSON 文件放在 src/main/resources/json/movies.json 中。 在代码中，而不是编写 JSON 数组，如 var movies= [{}] 所示...我想推送一个本地 JSON 文件。

<!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 movies = [
            {   "title":"The Shawshank Redemption", 
                "imdb-id":"tt0111161", 
                "rank":"1", 
                "rating":"9.216891492644972", 
                "rating-count":"2025250"
                }
        ]

        // EXTRACT VALUE FOR HTML HEADER. 
        // ('Book ID', 'Book Name', 'Category' and 'Price')
        var col = [];
        for (var i = 0; i < movies.length; i++) {
            for (var key in movies[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 < movies.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = movies[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>

Answer 1

假设src/main/resources/json/movies.json是一个服务器端文档，以下示例应该对您有所帮助：

 var testData = [{ "title": "The Shawshank Redemption", "imdb-id": "tt0111161", "rank": "1", "rating": "9.216891492644972", "rating-count": "2025250" }]; $(function() { function createTableFromJSON(jData) { // Find Column Headers var col = []; $.each(jData[0], function(key, val) { col.push(key); }); // Create Table via jQuery Object var table = $("<table>", { class: "data-table" }); // Append Header Row table.append($("<tr>", { class: "data-table-header-row" })); // Populate Header Cells $.each(col, function(k, h) { var th = $("<th>").html(h).appendTo($("tr:eq(0)", table)); }); // Append new Rows and Populate Cells $.each(jData, function(i, r) { var tr = $("<tr>", { class: "data-table-row" }).appendTo(table); $.each(r, function(j, c) { $("<td>").html(c).appendTo(tr); }); }); // Return Table jQuery Object return table; } // Bind Click Callback to Button $("#create-table").click(function() { /* $.getJSON('./src/main/resources/json/movies.json', function(response){ $("#showData").html(createTableFromJSON(response)); }); */ $("#showData").html(createTableFromJSON(testData)); }); });

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="create-table" type="button" value="Create Table From JSON" /> <p id="showData"></p>

我使用testData进行测试。 在评论中，您将看到：

$.getJSON('./src/main/resources/json/movies.json', function(response){
  $("#showData").html(createTableFromJSON(response));
});

这将获取 JSON 数据并将 JSON 读取到变量响应中。 您可以将其直接输入 function 并通过.html()将其推送到文档中。

Answer 2

检查帖子它有一些重要的信息来实现你想要的。 在较高级别上，现代浏览器不允许您在没有用户干预的情况下访问本地文件，因此您不能在 html 标记中包含 json 文件。 是的，您可以包含 javascript 文件，但不能包含扩展名为 json 的文件。 现在回到最初的问题，您可以通过多种方式在服务器上设置 json 文件，然后您可以使用 ajax GET 调用获取 JSON 文件。 就像您可以在互联网上的许多地方托管文件一样-

http://myjson.com
https://jsonbin.io/
github页面

如何在 html 中插入本地 json 文件

问题描述

2 个解决方案

解决方案1
0 2019-11-05 22:51:44

解决方案2
-1 2019-11-05 22:05:17

如何在 html 中插入本地 json 文件

问题描述

2 个解决方案

解决方案1 0 2019-11-05 22:51:44

解决方案2 -1 2019-11-05 22:05:17

解决方案1
0 2019-11-05 22:51:44

解决方案2
-1 2019-11-05 22:05:17