如何在HTML中插入本地JSON文件

2024-05-06 • 问答

你好，下面的代码我想手动加载本地JSON文件而不是数据，我希望我的代码从文件中读取所有数据并显示在HTML表中。我的JSON文件放在src / main / resources / json / movies.json中。在代码中，而不是像var movie = [{}]所示那样编写JSON数组...我想推送本地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>

假设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读取到变量响应中。您可以直接将其输入到函数中，然后通过.html()将其推送到文档中。

检查post，其中包含一些重要信息，可帮助您实现所需的目标。从高层次上讲，现代浏览器不允许您在没有用户干预的情况下访问本地文件，因此您不能在html标签中包含json文件。是的，您可以包含javascript文件，但不能包含扩展名为json的文件。现在进入原始问题，有多种方法可以在服务器上设置json文件，然后可以使用ajax GET调用获取JSON文件。就像您可以在Internet上的许多地方托管文件一样-

如何在HTML中插入本地JSON文件

urboat20 回答：如何在HTML中插入本地JSON文件

大家都在问