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>

在检查get响应时，我可以看到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

检查你的错误，

f(N,F)

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

$.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);

            }

      });

Answer 2

好的，我把它排序了。＆＃34;模块＆＃34;我的JSON文件开头的标题导致了问题，我在尝试输出数组的任何值时都会得到一个空值。我刚刚摆脱它，下到一个数组对象，我可以再次输出data.value。

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

2 个答案: