如何在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響應數據

回答

相關問題