用 JSON 對象填充 DataTable

Question

我有一個具有以下值的 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
    },
}

Answer 1

您可以在 invSelectionCount 的鍵上使用 map 來返回所需的對象

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

運行這個片段

 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>

Answer 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"}
    ],
  }) 
})