使用jquery将json数据加载到表中答案

【问题标题】：loading json data into table using jquery使用jquery将json数据加载到表中
【发布时间】：2020-09-24 06:43:05
【问题描述】：

JQUERY 脚本

{
  $(document).ready(function(){
$.getJSON("array.json",function(data){
    var employee_data='';
    $.each(data,function(key,value){
   employee_data +='<tr>';
   employee_data +='<td>'+value.DIVNFULLNAME+'</td>';
   employee_data +='<td>'+value.FUNCDESGDES+'</td>';
   employee_data +='<td>'+value.INDENTDATE+'</td>';
     employee_data +='<tr>';
    });
  $('#data-table').append(employee_data);

});

});

}

HTML

{

     <div id="myapp" class="container">
           <h1 align="center">Show JSON Data in Jquery Datatables</h1><br />
            <h3 align="center">Employee Database</h3><br />
            <table id="data-table" class="table table-bordered">
                 <thead>
                      <tr>
                           <th>DIVNFULLNAME </th>
                           <th>FUNCDESGDES</th>
                           <th>INDENTDATE</th>
                      </tr>
                 </thead>
            </table>
       </div>

}

数组.JSON

{

   {"data":[{
          "DIVNFULLNAME":"DIRECTORATE OF INFORMATION SYSTEMS & MANAGEMENT",
          "FUNCDESGDES":"PROGRAMME MANAGER",
          "INDENTDATE":"2020-06-10 00:00:00.0"
          }

] }

}

我正在尝试使用 JQuery 将数据加载到表中但是当我试图将数据加载到表中但它显示为未定义时。我是 JQuery 新手，请建议。

【问题讨论】：

我已经厌倦了这个，但它也没有显示数据。
try => data.data 在你的$.each - 你有一个对象数组。您需要通过dot 表示法访问并对其进行循环以获取对象的值。

标签： jquery

【解决方案1】：

问题在于您的 JSON 结果是一个对象，而不是一个数组。

你有两个选择。要么你把结果改成这样：

[
    {
      "DIVNFULLNAME":"DIRECTORATE OF INFORMATION SYSTEMS & MANAGEMENT",
      "FUNCDESGDES":"PROGRAMME MANAGER",
      "INDENTDATE":"2020-06-10 00:00:00.0"
    }
    // ... other objects
]

或者，当您处理响应时，将data 属性用于结果对象：

$(document).ready(function(){
  $.getJSON("array.json",function(RESPONSE){
    var employee_data='';
    $.each(RESPONSE.data,function(key,value){
      employee_data +='<tr>';
      employee_data +='<td>'+value.DIVNFULLNAME+'</td>';
      employee_data +='<td>'+value.FUNCDESGDES+'</td>';
      employee_data +='<td>'+value.INDENTDATE+'</td>';
      employee_data +='<tr>';
    });
    $('#data-table').append(employee_data);
  });
});

我写了RESPONSE 大写以强调错误所在。来自 ajax 响应函数的 data 参数是包含另一个 data 属性的对象，其中您有您的数组。

【讨论】：

对不起，我错过了这个逻辑，非常感谢它对我有用。
当我使用 servlet 时，我可以使用这个逻辑从 servlet 获取数据
嗨@jyothikachapur。乐意效劳。您能否将答案标记为已接受？谢谢。
我已标记为已接受，谢谢您的帮助，请您像 servlet 一样帮助我
@jyothikachapur 只是在这里更正。您已将另一个答案标记为已接受 - 我认为您应该根据您的评论选择这个答案

【解决方案2】：

这就是我的做法。我会创建一个变量并使用循环来创建数据。然后在最后将其附加到表格正文中。

$(document).ready(function() {


var a = {
  "data": [
  {
    "DIVNFULLNAME": "DIRECTORATE OF INFORMATION SYSTEMS & MANAGEMENT",
    "FUNCDESGDES": "PROGRAMME MANAGER",
    "INDENTDATE": "2020-06-10 00:00:00.0"
  },
  {
    "DIVNFULLNAME": "TESTER 1",
    "FUNCDESGDES": "TESTER 2",
    "INDENTDATE": "TESTER 3"
  }
  ]
}
 
  var employee_data = '';
  
  for(i in a.data) {
      employee_data += '<tr>';
      employee_data += '<td>' + a.data[i].DIVNFULLNAME + '</td>';
      employee_data += '<td>' + a.data[i].FUNCDESGDES + '</td>';
      employee_data += '<td>' + a.data[i].INDENTDATE + '</td>';
      employee_data += '</tr>';
  }
  
  $('#data-table tbody').append(employee_data);
  
});

.table-bordered, th, td {
  border-collapse: collapse;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myapp" class="container">
  <h1 align="center">Show JSON Data in Jquery Datatables</h1><br />
  <h3 align="center">Employee Database</h3><br />
  <table id="data-table" class="table table-bordered">
    <thead>
      <tr>
        <th>DIVNFULLNAME</th>
        <th>FUNCDESGDES</th>
        <th>INDENTDATE</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

【讨论】：