如何在 html 表中显示 JSON 响应数据

Question

我是 JSON 的新手，并且在使用 getJSON 为大学作业在网页上显示数据时遇到了困难。 我尝试了一个循环来附加表行，但有点不清楚如何使用从 JSON 文件返回的数据。

这是我试图开始工作的内容：

<body>
    <table>
    <tr>
        <th>year</th>
        <th>sem</th>
        <th>module</th>
        <th>crn</th>
        <th>title</th>
        <th>credits</th>
         <th>level</th>
         <th>coordinator</th>
    </tr>
</table>
    <script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
      $.getJSON('modules.json', function(data) {
      console.log(data);
      var tr;
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i].year + "</td>");
            tr.append("<td>" + data[i].sem + "</td>");
            tr.append("<td>" + data[i].module + "</td>");
            tr.append("<td>" + data[i].crn + "</td>");
            tr.append("<td>" + data[i].title + "</td>");
            tr.append("<td>" + data[i].credits + "</td>");
            tr.append("<td>" + data[i].level + "</td>");
            tr.append("<td>" + data[i].coordinator + "</td>");

            $('table').append(tr);

            }
      });
    </script>
</body>

在检查获取响应时，我可以看到 JSON 数据已成功返回，但尽管尝试实现了许多示例，但我还是无法将其显示在表格中。 我的理解是，它是在循环中附加行，但无论我尝试什么，我似乎都无法获得任何表输出。 我的网页现在只显示表格标题。

下面是我的json文件：

{ "modules":[
    {
        "year": 2,
        "sem": 1,
        "module": "COM145",
        "crn": 1865,
        "title": "Content Authoring",
        "credits": 10,
        "level": 5,
        "coordinator": "Clarke Kent"
    },
    {
        "year": 1,
        "sem": 3,
        "module": "COM1333",
        "crn": 2763,
        "title": "Acad Study Skills for M'Media",
        "credits": 10,
        "level": 5,
        "coordinator": "Bruce Wayne"
     }
]}

谢谢

Answer 1

检查你做错的地方，

$.getJSON('modules.json', function(data) {
        var tr;
        for (var i = 0; i <data.modules.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data.modules[i].year + "</td>");
            tr.append("<td>" + data.modules[i].sem + "</td>");
            tr.append("<td>" + data.modules[i].module + "</td>");
            tr.append("<td>" + data.modules[i].crn + "</td>");
            tr.append("<td>" + data.modules[i].title + "</td>");
            tr.append("<td>" + data.modules[i].credits + "</td>");
            tr.append("<td>" + data.modules[i].level + "</td>");
            tr.append("<td>" + data.modules[i].coordinator + "</td>");

            $('table').append(tr);

            }

      });

也通过 jquery.each 方法检查此方法

$.getJSON('modules.json', function(data) { 
        $.each(data.modules, function(index, val) {
            tr = $('<tr/>');
            tr.append("<td>" + val.year + "</td>");
            tr.append("<td>" + val.sem + "</td>");
            tr.append("<td>" + val.module + "</td>");
            tr.append("<td>" + val.crn + "</td>");
            tr.append("<td>" + val.title + "</td>");
            tr.append("<td>" + val.credits + "</td>");
            tr.append("<td>" + val.level + "</td>");
            tr.append("<td>" + val.coordinator + "</td>");    
            $('table').append(tr);
        });

      });

Answer 2

好的，所以我得到了这个排序。 我的 JSON 文件开头的“模块”标题引起了问题，当我尝试输出数组的任何值时，我会得到一个空值。 我刚刚摆脱它，回到一个数组对象，我可以再次输出 data.value 。

如何在 html 表中显示 JSON 响应数据

问题描述

2 个解决方案

解决方案1
0 2017-10-22 13:46:34

解决方案2
0 2017-10-29 18:09:43

如何在 html 表中显示 JSON 响应数据

问题描述

2 个解决方案

解决方案1 0 2017-10-22 13:46:34

解决方案2 0 2017-10-29 18:09:43

解决方案1
0 2017-10-22 13:46:34

解决方案2
0 2017-10-29 18:09:43