javascript - 在 HTML 数据表上使用子元素数组

Question

我有一些如下所示的 JSON 数据:

{"数据":[{"一":"[[1756.53, 2.419583], [13755.95, 0.056274], [1755.62, 0.027065], [11755.59, 0.085065], [1175.28, 906], [ 11752.33, 0.333531], [11752.31, 0.5], [11752.03, 0.6], [11752.02, 0.107656], [1751.99, 1.288268], ....

此 json 通过 AJAX 请求检索并提供给 HTML 数据表:

$(document).ready(function() {

    var table = $('#mytable').DataTable({
        "serverSide": true,
        "ajax": "/api/?format=datatables",
        "columns": [
          {
            data: 'one',

          }
        ]
    });
    setInterval( function () {
    table.ajax.reload();
}, 10000 );
});

其中 api 是 api 端点。

我的实际代码的问题是，当加载 HTML 数据表时，我会看到数据像这样呈现

DATA:
[[1848, 84857], [4944, 4949], [34, 65], [3566, 78], .... ]

基本上所有 JSON 都会被扔到表的一行中。

相反，我希望将每条记录放在一行中，例如:

DATA
1848, 84857
4944 4949 
....

在调查网络响应之后，我得出的结论是，我的代码将 JSON 响应视为字符串，而不是具有子元素的数组(具有一系列数组的数组，每个数组都有两个items)，因此数据表无法迭代它。

有什么办法可以解决这个问题吗？

Answer 1

实际上你的主要问题是JSON响应格式。对象数据应包含对象数组或数组数组。但现在看来它是对象“one”中的“json string”。

如果您无法覆盖服务器端的 json 响应，我们可以使用 Datatables AJAX DataSrc 更改/重新定位数据源选项。

Option of dataSrc is to provide the ability to alter what data DataTables will read from the JSON returned from the server, or to manipulate the data from one form into another (be it JSON to another form of JSON, XML, YAML etc).

我们需要两 (2) 部分来解决您的问题:

1. 使用 重新定位 JSON 数据 DataSrc 选项
2. 使用 JSON.parse 将 JSON 字符串转换为对象

代码:

var table = $('#mytable').DataTable({
         "ajax": {
            "type" : "GET",
            "url" : "/endpoint/?format=datatables",
            "dataSrc": function ( json ) {
                console.log(JSON.parse(json.data[0].one));
                return JSON.parse(json.data[0].one);
            }       
            },
       "columns": [
          {"data":0, "title":"col1"},
          {"data":1, "title":"col2"}
        ]
    });

工作演示:

//This is for JSON request/response mocking only. Do not use this when you have a live JSON server
$.mockjax({
    url: "/endpoint/?format=datatables",
    response: function(settings) {
      this.responseText = {
        "draw": settings.data.draw,
        "recordsTotal": 4,
        "recordsFiltered": 4,
        "data": [
        {"one":"[[1756.53, 2.419583], [13755.95, 0.056274], [1755.62, 0.027065], [11755.59, 0.085065], [1175.28, 906], [11752.33, 0.333531], [11752.31, 0.5], [11752.03, 0.6], [11752.02, 0.107656], [1751.99, 1.288268]]"}
        ]
      }
    }
});

$(document).ready(function() {

    var table = $('#mytable').DataTable({
         "ajax": {
            "type" : "GET",
            "url" : "/endpoint/?format=datatables",
            "dataSrc": function ( json ) {
                console.log(JSON.parse(json.data[0].one));
                return JSON.parse(json.data[0].one);
            }       
            },
       "columns": [
          {"data":0, "title":"col1"},
          {"data":1, "title":"col2"}
        ]
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="mytable" class="display nowrap" width="100%"></table>