用 JSON 对象填充 DataTable

Posted 2023-05-08

【中文标题】用 JSON 对象填充 DataTable

【英文标题】：Filling up DataTable with a JSON object

【发布时间】：2020-07-10 15:33:49

【问题描述】：

我有一个包含以下值的 JSON 文件，我正在尝试用 JSON 文件的值填充 DataTable。

我希望 DataTable 具有 3 列（颜色、大小、数量）的格式。

一个例子是红色，小，100 和红色，中，200。

但是，这 3 列位于 JSON 对象“invSelectionCount”中，如我的 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": "invSelectionCount",
       "data": "invSelectionCount",
       "data": "invSelectionCount"
    ],
  ) 
) 

---

JSON 文件

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

【参考方案1】：

您可以在 invSelectionCount 的键上使用 map 来返回所需的对象

Object.keys(data["invSelectionCount"]).map(key =>return 
      Color: key.split('=')[0],
      Size: key.split('=')[1],
      Quantity: data["invSelectionCount"][key]
    )

运行这个 sn-p

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

  $('#product-inventory-level').DataTable(
     "columns": [
        "title": "Color",
         "data": "Color",
      ,
      
        "title": "Size",
        "data": "Size"
      ,
      
        "title": "Quantity",
        "data": "Quantity"
      
    ],
    "data": Object.keys(data["invSelectionCount"]).map(key =>return 
      Color: key.split('=')[0],
      Size: key.split('=')[1],
      Quantity: data["invSelectionCount"][key]
    )
  )

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="product-inventory-level"></table>

【讨论】：

您好，假设我有 2 个哈希图，如何使用 Object.keys 在“数据”下定义它，因为我只能使用一个“数据”声明，对吗？

【参考方案2】：

尝试扩展这个：

.done( function(data) 
  var array = new Array();

  Object.keys(json["invSelectionCount"]).forEach(function(key) 
      var splitstring = key.split('=');

      splitstring[0] -> red
      splitstring[1] -> small
      json["invSelectionCount"][key] -> 100
      array.push("color": splitstring[0], "size": splitstring[1], "quantity": json["invSelectionCount"][key],);
  );

  $('#product-inventory-level').DataTable( 
    "data": [array],
    "columns": [
       "data": "color",
       "data": "size",
       "data": "quantity"
    ],
  ) 
) 

【讨论】：

您知道如何在 DataTable“列”部分添加此功能吗？