JQuery 数据表未显示其数据

Question

这是我的 JSON 数据：

{
    "0": {
        "counthigh": 33,
        "loc": "Barangay 7",
        "countmedium": 25,
        "countlow": 31
    },
    "1": {
        "counthigh": 27,
        "loc": "Barangay 6",
        "countmedium": 31,
        "countlow": 15
    },
    "2": {
        "counthigh": 17,
        "loc": "Comagascas",
        "countmedium": 38,
        "countlow": 10
    },
    "3": {
        "loc": "Barangay 3",
        "countmedium": 3,
        "countlow": 16
    }
}

我希望它在我的数据中使用tables，到目前为止试过这个：

 $(document).ready(function () {
     var tbl_barangay = $('#jsontable_brgy').dataTable();
     $.ajax({
         url: 'tbl/',
         dataType: 'json',
         success: function (s) {
             tbl_barangay.fnClearTable();
             for (var i = 0; i < s.length; i++) {
                 tbl_barangay.fnAddData([
                 s[i]['locat'],
                 s[i]['countlow'],
                 s[i]['countmedium'],
                 s[i]['counthigh']]);
             }
         },
         error: function (e) {
             alert(e);
         }
     });
 });

它在 table 上没有显示任何内容，也没有抛出任何错误。有什么帮助吗？我一直在想办法，但失败了。

Answer 1

您正在尝试循环遍历 Object，就好像它是 Array。

 $(document).ready(function() {
     var tbl_barangay = $('#jsontable_brgy').dataTable();
     $.ajax({
         url: 'tbl/',
         dataType: 'json',
         success: function(s) {
             tbl_barangay.fnClearTable();
             for (var key in s) {
                 if (s.hasOwnProperty(key)) {
                     var obj = data[key];
                     tbl_barangay.fnAddData([
                         obj['loc'] || 0,
                         obj['counthigh'] || 0,
                         obj['countlow'] || 0,
                         obj['countmedium'] || 0
                     ]);
                 }
             }
         },
         error: function(e) {
             alert(e);
         }
     });
 });

由于您使用的是数据表，我认为您正在为此努力 - 数据表提供了开箱即用的此功能 - http://www.datatables.net/examples/ajax/objects.html 你的数据结构有点不对劲。

这是一个按照您的方式进行的工作演示（您还缺少“3”上的属性，我在下面添加了它）：

var data = {
  "0": {
    "counthigh": 33,
    "loc": "Barangay 7",
    "countmedium": 25,
    "countlow": 31
  },
  "1": {
    "counthigh": 27,
    "loc": "Barangay 6",
    "countmedium": 31,
    "countlow": 15
  },
  "2": {
    "counthigh": 17,
    "loc": "Comagascas",
    "countmedium": 38,
    "countlow": 10
  },
  "3": {
    "loc": "Barangay 3",
    "countmedium": 3,
    "countlow": 16,
    "counthigh": 3,
  }
};

$(document).ready(function() {

  var tbl_barangay = $('#jsontable_brgy').dataTable();
  tbl_barangay.fnClearTable();

  for (var key in data) {
    if (data.hasOwnProperty(key)) {
      var obj = data[key];
      tbl_barangay.fnAddData([
        obj['loc'],
        obj['counthigh'],
        obj['countlow'],
        obj['countmedium']
      ]);
    }
  }
});

<link href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<table id="jsontable_brgy">
  <thead>
    <tr>
      <th>Location</th>
      <th>High</th>
      <th>Medium</th>
      <th>Low</th>
    </tr>
  </thead>
</table>

JQuery 数据表未显示其数据

JQuery Datatables not showing its data

json

datatables