无法使用 JSON 生成表格 HTML？答案

【问题标题】：Unable to generate table HTML using JSON?无法使用 JSON 生成表格 HTML？
【发布时间】：2021-02-26 13:55:09
【问题描述】：

我只是试图使用 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>

【问题讨论】：

这能回答你的问题吗？ Convert json data to a html table
您的表格标签丢失 id="table" 您在此处使用的 $('#table')
@Liam 不太清楚，我不知道如何将长 JSON 文件作为变量传递？而不必将所有内容粘贴到我的 javascript 文件中？
感谢@Swati，当我输入问题时实际上是一个错误，因为我做了一些更改，已编辑问题
您是否在浏览器控制台中看到任何错误？

标签： javascript html jquery json

【解决方案1】：

很遗憾，我无法连接到此 SO sn-p 中的数据源，因此我首先专注于脚本的其余部分。我缩短了一些位并将它们放在一起，这样它们就可以在这里工作了。

您需要检查的是您的 $.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>

【讨论】：

你错过了结束（在 $.each 中）
@cars10m 我不知道如何让它像这样工作，因为我的 JSON 数据在一个单独的文件中，而不是存储在变量中

【解决方案2】：

$.parseJSON 正在解析 json 字符串，我认为您需要捕获一个文件，因此您应该使用 $.getJSON，因为它是 $.ajax 请求的缩短函数。

其他都应该没问题。

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

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

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

food.json

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

test.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>

【讨论】：

谢谢你，我也试过这个，但它似乎仍然没有工作:(
你的json文件和你的html文件在同一个目录吗？
我已经制定了可行的解决方案，并修复了一些问题，请查看。
这正是我一直在尝试做的，非常感谢。我仍然收到一个错误，但我认为这与我的设置有关，所以我将尝试使用它跨域请求被阻止：同源策略不允许读取 file:///Users 处的远程资源。 .food.json。（原因：CORS 请求不是 http）。

【解决方案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>

【讨论】：