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

【问题标题】：How to insert local json file in html如何在html中插入本地json文件
【发布时间】：2020-03-02 05:17:39
【问题描述】：

您好，在下面的代码中，我想手动加载本地 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>

【问题讨论】：

使用 AJAX 抓取文件数据并将其加载到 movies 对象中，如下所示：stackoverflow.com/questions/14388452/…
请澄清您所说的“本地”是什么意思。在我看来，这意味着 Web 浏览器或客户端本地而不是服务器上。如果它在服务器上，您需要执行 HTTP GET 以将 JSON 数据读入 JavaScript，然后您可以从该数据构建 HTML 表。如果您指的是本地文件，例如用户计算机上的文件，则必须通过文件输入访问它。

标签： javascript jquery html json spring-boot

【解决方案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 进行测试。在 cmets 中，您将看到：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：