使用 jQuery 和 JSON 數組創建 HTML 表（行錯誤未定義）

Question

在此處輸入圖片描述

Html：

<table id="example" class="table table-striped" style="width:100%">
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <th>7</th>
              
            </tr>
        </thead>
        <tbody>
        </tbody>
 </table>

使用以下指令 jquery

<script>
                $(document).ready(function () {
  
                    // FETCHING DATA FROM JSON FILE
                    $.getJSON("http://localhost:8089/projectw/ServletJSON", function (data) {
                        var e= "";
  
                        // ITERATING THROUGH OBJECTS
                        $.each(data, function (key, value) {
  
                            //CONSTRUCTION OF ROWS HAVING
                            // DATA FROM JSON OBJECT
                            e += '<tr>'; 
                            e += '<td>' + value.ag + '</td>';
                            e += '<td>' + value.pa + '</td>';
                            e += '<td>' + value.ex + '</td>';
                            e += '<td>' +  value.em + '</td>';             
                            e += '<td>' +  value.at + '</td>';                
                            e += '<td>' + value.ct + '</td>';
                            e += '<td>' +  value.num_ex + '</td>';
                            e += '</tr>';
                        });
                          
                        //INSERTING ROWS INTO TABLE 
                        $('#example').append(e);
                    });
                });
            </script>

servlet 中的 json 示例：

{
  "JsonTest": [
    {
      "ag": "RAX",
      "pa": "pa 1",
      "ex": "RXTT",
      "em": "ME",
      "at": 1,
      "ct": 0,
      "num_ex": "1"
    },
    {
      "ag": "TOM",
      "pa": "pa 2",
      "ex": "TOCC",
      "em": "MB",
      "at": 0,
      "ct": 0,
      "num_ex": "2"
    }
  ]
}

觀察 如果我命令顯示 json 文本（

     var req = new XMLHttpRequest();
     req.open('GET', 'http://localhost:8089/projectw/ServletJSON', true);
     req.send();
     req.onload = function(){
     var json=JSON.parse(req.responseText);
     document.getElementsByClassName('message(class of table example)')[0].innerHTML = JSON.stringify(json)

)，我獲得了成功，但沒有填充表。 我該如何調整呢？ 謝謝你們 ！

預期的行將填充 json 個值，控制台中沒有錯誤。

Answer 1

如果您在代碼中添加一個簡單的console.log()來顯示循環中的key和value ，那么問題就很明顯了：

$.each(data, function (key, value) {
    console.log('key is', key, 'value is', value);
    // ... your code ...
});

控制台顯示：

鍵是 JsonTest 值是 [ { "ag": "RAX", "pa": "pa 1", ....等

看看你的 JSON object 很明顯 - 你只有 1 個頂級鍵JsonTest ，你所有的真實數據都嵌套在它下面。 您想要迭代data.JsonTest ，而不是data 。 這是一個已修復該錯誤的簡化工作示例：

 let data = { "JsonTest": [ { "ag": "RAX", "pa": "pa 1", "ex": "RXTT", "em": "ME", "at": 1, "ct": 0, "num_ex": "1" }, { "ag": "TOM", "pa": "pa 2", "ex": "TOCC", "em": "MB", "at": 0, "ct": 0, "num_ex": "2" } ] }; $(document).ready(function () { populateTable(data); function populateTable(data) { var e= ""; let jsontest = data.JsonTest; // ITERATING THROUGH OBJECTS $.each(jsontest, function (key, value) { console.log('key is', key, 'value is', value); //CONSTRUCTION OF ROWS HAVING // DATA FROM JSON OBJECT e += '<tr>'; e += '<td>' + value.ag + '</td>'; e += '<td>' + value.pa + '</td>'; e += '<td>' + value.ex + '</td>'; e += '<td>' + value.em + '</td>'; e += '<td>' + value.at + '</td>'; e += '<td>' + value.ct + '</td>'; e += '<td>' + value.num_ex + '</td>'; e += '</tr>'; }); //INSERTING ROWS INTO TABLE $('#example').append(e); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="example"> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> </tr> </thead> <tbody> </tbody> </table>

您確實需要學習進行基本調試 - 使用控制台是編寫 Javascript 的第一步。

在 SO 指南下注意我認為這個問題應該被認為是一個錯字，它不太可能對未來的訪問者有用。 我已投票關閉拼寫錯誤。

Answer 2

謝謝，我修改了信息，得到了正確的結果：

$(document).ready(function() {
  // FETCHING DATA FROM JSON URL
  $.getJSON("http://localhost:8089/projectw/ServletJSON", function (data) {
    var e= "";
    let jsonTest= data.jsonTest; 
  });
});

我相信它可以幫助其他開發者，因為該論壇包含更多問題 JSON 文件和少數使用 URL 的問題！