Заполнение DataTable объектом JSON

Question

У меня есть файл JSON со следующими значениями, и я пытаюсь заполнить DataTable значениями файла JSON.

Я бы хотел, чтобы DataTable имел формат с 3 столбцами (Цвет, Размер, Количество).

Примером может быть Красный, Маленький, 100 и Красный, Средний, 200.

Однако эти 3 столбца находятся в объекте JSON invSelectionCount, как показано в моем JSON файле. Как перебрать файл JSON, чтобы манипулировать объектом внутри него, чтобы заполнить таблицу данных?

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 для возврата нужного объекта

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