无法使用 JSON 生成表 HTML？

Question

我只是想使用 JSON 文件中的信息生成一个表，但它不起作用 - 我是 HTML 的新手，所以我看不出我做错了什么。 名为 food.json 的 JSON 文件就像：

[
{
      "Type": "Snack",
      "Flavour": "Salted",
      "Brand": "Walkers"
   },
   {
      "Type": "Dessert",
      "Flavour": "Chocolate",
      "Brand": "Alpro",
   }
]

我有一个名为 test.js 的 javascript 文件，其中包含以下内容：

    $(document).ready(function () {

        $.getJSON("food.json",
            function (data) {
                var food = '';

                $.each(data, function (key, value) {

                    food += '<tr>';
                    food += '<td>' +
                        value.Type + '</td>';

                    food += '<td>' +
                        value.Flavour + '</td>';

                    food += '<td>' +
                        value.Brand + '</td>';

                    food += += '</tr>';
                });

                $('#table').append(food);
            });
    });

下面是我的 HTML：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="jquery-3.5.1.js"></script>
        <script src="test.js"></script>
        <title>Fave Food</title>
    </head>
    <body>
        <h1>My Fave Food</h1>
        <form>
            <button onclick="getJSON()">Click for My Fave Food!</button>
        </form>
        <table id="table">
            <thead>
            <tr>
                <th>Type</th>
                <th>Flavour</th>
                <th>Brand</th>
            </tr>
            </thead>
        </table>
    </body>
    </html>

Answer 1

不幸的是，我无法连接到此 SO 片段中的数据源，因此我首先专注于脚本的 rest。 我缩短了一些位并将它们放在一起，这样它们就可以在这里工作了。

您需要检查的是您的$.parseJSON()或我在此处使用的替代品 ( $.getJSON() ) 是否实际提供了data数组。

 const data = [ { "Type": "Snack", "Flavour": "Salted", "Brand": "Walkers" }, { "Type": "Dessert", "Flavour": "Chocolate", "Brand": "Alpro" } ]; $(document).ready(function () { // $.getJSON("food.json", function (data) { var food = ''; $.each(data, function (key, value) { food += '<tr><td>'+value.Type+'</td>'; food += '<td>'+value.Flavour+'</td>'; food += '<td>'+value.Brand+'</td><tr>'; }); $('#table').append(food); // }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>My Fave Food</h1> <form> <button onclick="parseJSON()">Click for My Fave Food!</button> </form> <table id="table"> <thead><tr><th>Type</th><th>Flavour</th><th>Brand</th></tr></thead> </table>

那么，JSON 部件可以使用不同的数据源进行演示。 我将使用http://jsonplaceholder.typicode.com/users ，因为它是公开的：

 $(document).ready(function () { $.getJSON("http://jsonplaceholder.typicode.com/users", function (data) { var food = ''; $.each(data, function (key, value) { food += '<tr><td>'+value.name+'</td>'; food += '<td>'+value.username+'</td>'; food += '<td>'+value.email+'</td><tr>'; }); $('#table').append(food); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>My Fave Users</h1> <table id="table"> <thead><tr><th>Name</th><th>Username</th><th>Email</th></tr></thead> </table>

Answer 2

那么$.parseJSON正在解析 json 字符串，因为我看到你需要捕获一个文件，所以你应该使用$.getJSON因为它被缩短为 $.Z2705A83A5A0659CCE345839726 请求。

其他都应该没问题。

编辑：我已经测试过了，看起来你的 $.getJSON 给出了错误而不是成功，我猜你的 json 应该被格式化，所以当我这样使用它时它起作用了[{"Type":"Snack","Flavour":"Salted","Brand": "Walkers"},{"Type": "Dessert","Flavour":"Chocolate","Brand":"Alpro"}]

而且你的按钮在表单中，所以每次整个页面都会刷新，所以我放了属性type="button" ，所以它不会触发表单提交。

这是完整的工作解决方案：

食品.json

[{"Type": "Snack","Flavour": "Salted","Brand": "Walkers"},{"Type": "Dessert","Flavour": "Chocolate","Brand": "Alpro"}]

测试.js

function getJSON() {
    
    $.getJSON("food.json", function (data) {
            var food = '';
            console.log( data );
            $.each(data, function (key, value) {

                food += '<tr>';
                food += '<td>' +
                    value.Type + '</td>';

                food += '<td>' +
                    value.Flavour + '</td>';

                food += '<td>' +
                    value.Brand + '</td>';

                food += '</tr>';
            });

            $('#table').append(food);
        }).done(function() {
    console.log( "second success" );
  })
  .fail(function(data) {
    console.log( "error", data );
  })
  .always(function() {
    console.log( "complete" );
  });
            
}

html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="test.js"></script>
    <title>Fave Food</title>
</head>
<body>
    <h1>My Fave Food</h1>
    <form>
        <button type="button" onclick="getJSON();">Click for My Fave Food!</button>
    </form>
    <table id="table">
        <thead>
        <tr>
            <th>Type</th>
            <th>Flavour</th>
            <th>Brand</th>
        </tr>
        </thead>
    </table>
</body>
</html>

Answer 3

试试这个（我评论了表单标签，因为它重新加载页面然后你丢失了由 JS 创建的 html 结构）：

 const data = [ { Type: "Snack", Flavour: "Salted", Brand: "Walkers", }, { Type: "Dessert", Flavour: "Chocolate", Brand: "Alpro", }, ]; function parseJSON() { let food = "<tbody>"; data.forEach((item) => { food += "<tr>"; food += "<td>" + item.Type + "</td>"; food += "<td>" + item.Flavour + "</td>"; food += "<td>" + item.Brand + "</td>"; food += "</tr>"; }); food += "</tbody>"; let table = document.getElementById("table"); table.insertAdjacentHTML("beforeend", food); }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <.-- <script type="text/javascript" src="jquery-3.5.1.js"></script> --> <script src="test.js"></script> <title>Fave Food</title> </head> <body> <h1>My Fave Food</h1> <!-- <form> --> <button onclick="parseJSON()">Click for My Fave Food!</button> <!-- </form> --> <table id="table"> <thead> <tr> <th>Type</th> <th>Flavour</th> <th>Brand</th> </tr> </thead> </table> </body> </html>

无法使用 JSON 生成表 HTML？

问题描述

3 个解决方案

解决方案1
2 2021-02-26 14:19:26

解决方案2
1 已采纳 2021-02-26 14:18:04

解决方案3
0 2021-02-26 14:45:53

无法使用 JSON 生成表 HTML？

问题描述

3 个解决方案

解决方案1 2 2021-02-26 14:19:26

解决方案2 1 已采纳 2021-02-26 14:18:04

解决方案3 0 2021-02-26 14:45:53

解决方案1
2 2021-02-26 14:19:26

解决方案2
1 已采纳 2021-02-26 14:18:04

解决方案3
0 2021-02-26 14:45:53