JSON 数据未填满 DataTable答案

【问题标题】：JSON data not filling up in DataTableJSON 数据未填满 DataTable
【发布时间】：2020-07-10 11:23:40
【问题描述】：

我有一个包含以下值的 JSON 文件，我正在尝试用 JSON 文件的值填充 DataTable。我尝试使用以下带有“数据”的 AJAX 调用方法并使用“列”并使用“数据”和“列”进行多次试验和错误，但我的 DataTable 仍然是空的。我做错了什么是有原因的，因为我可以在另一个 JSON 文件中使用它，输入显示在最底部，但是 JSON 文件是数组的形式。因此，我不确定如何使用不是数组的 JSON 文件填充 DataTable。

AJAX 调用

$.ajax({
  'url': 'http://localhost:8080/Retail-war/webresources/products/getProduct/' + productId,
  'method': 'GET',
  'contentType': 'application/json; charset=utf-8',
  'headers': {"Authorization": 'Bearer ' + sessionStorage.getItem('accessToken')},
}).done( function(data) {
  $('#product-inventory-level').DataTable( {
    "data": data,
    "columns": [
      { "data": "productId"},
      { "data": "originalPrice"},
      { "data": "productStatus"}
    ],
  }) 
  console.log("THIS IS THE DATA")
  console.log(data.productId)
  console.log(data.invSelectionCount)
  console.log(data.productId)
})

JSON 文件

{
    "productId": 1,
    "originalPrice": 59.9,
    "currentPrice": null,
    "productStatus": "LISTED",
    "discount": null,
    "productVol": null,
    "invSelectionCount": {
        "red=small": 100,
        "red=medium": 200
    },
}

适用于 JSON 文件

[
    {
        "productId": 1,
        "originalPrice": 59.9,
        "currentPrice": 0.0,
        "productStatus": "LISTED",
        "discount": 0.0,
    },
    {
        "productId": 2,
        "originalPrice": 9.99,
        "currentPrice": 0.0,
        "productStatus": "LISTED",
        "discount": 0.0,
    },
    {
        "productId": 3,
        "originalPrice": 69.9,
        "currentPrice": 0.0,
        "productStatus": "LISTED",
        "discount": 0.0,
    },
]

【问题讨论】：

尝试将"data": data,改为"data": [data],

标签： javascript jquery json datatables

【解决方案1】：

我认为 DataTable 应该只接受列表类型的数据。你可以试试：

  $('#product-inventory-level').DataTable( {
    "data": [data],
    "columns": [
      { "data": "productId"},
      { "data": "originalPrice"},
      { "data": "productStatus"}
    ],
  })

它只会将你的对象包装到一个列表中。

【讨论】：

有没有办法让我使用“invSelectionCount”中的值来显示数据表？例如，我想要 3 列（颜色、大小、数量），但当前“invSelectionCount”值类似于“red=small”：100，“red=medium”：200。我想将值拆分为 3 个不同的列数据表有没有办法做到这一点？
看来你需要某种交叉表功能，你可以试试github.com/tejacques/crosstab，github.com/ashwch/CrossTab。也许你可以使用一些东西。

【解决方案2】：

试试下面的片段。如果您的 ajax 结果是上述格式，它将正常工作

var data=[
    {
        "productId": 1,
        "originalPrice": 59.9,
        "currentPrice": 0.0,
        "productStatus": "LISTED",
        "discount": 0.0,
    },
    {
        "productId": 2,
        "originalPrice": 9.99,
        "currentPrice": 0.0,
        "productStatus": "LISTED",
        "discount": 0.0,
    },
    {
        "productId": 3,
        "originalPrice": 69.9,
        "currentPrice": 0.0,
        "productStatus": "LISTED",
        "discount": 0.0,
    },
];

$('#product-inventory-level').DataTable( {
    "data": data,
    "columns": [
      { "data": "productId"},
      { "data": "originalPrice"},
      { "data": "productStatus"}
    ],
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>


<table id="product-inventory-level" class="display" style="width:100%">
        <thead>
            <tr>
                <th>productId</th>
                <th>originalPrice</th>
                <th>productStatus</th>
            </tr>
        </thead>
    </table>

【讨论】：