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

-1

我是JSON新手，在使用getJSON进行大学任务时在网页上显示数据时遇到困难。我已经尝试了一个循环来追加表行，但有点不清楚如何使用从JSON文件返回的数据。如何在html表格中显示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" 
    } 
]}

感谢

来源

2017-10-22 Jordan96

你到目前为止尝试过什么？我不是一个为他们做某人的大学任务的人，但是我会通过指引你朝着正确的方向来帮助你。 –

如果你在函数（数据）中不使用'data'，你认为你应该得到什么结果？ – 2017-10-22 01:18:53

请在搜索之前询问：https://stackoverflow.com/questions/19901843/display-json-data-in-html-table，https://stackoverflow.com/questions/18395976/how-to-display-a- json-array-in-table-format等。 – MewX

检查您所做的错误，

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

     });

来源

2017-10-22 13:46:34 whoami

好吧，我得到了这个排序。我的JSON文件开始处的“modules”标题导致了问题，并且在尝试输出任何数组值时我会得到一个空值。我刚摆脱它，下降到一个数组对象，我可以再次输出data.value。

来源

2017-10-29 18:09:43 Jordan96

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

回答

相关问题