Filling up DataTable with a JSON object

user_3753175 0
Viewed 573

I am having a JSON file with the following values and I am trying to fill the DataTable with the values of the JSON file.

I would like the DataTable to be of the format with 3 columns (Color, Size, Quantity).

An example would be Red, Small, 100 and Red, Medium, 200.

However, these 3 columns are within the JSON object "invSelectionCount" as shown in my JSON file. How do I iterate through the JSON file to manipulate the object within it to fill up the DataTable?

AJAX Call

$.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 File

{
    "productId": 1,
    "originalPrice": 59.9,
    "currentPrice": null,
    "productStatus": "LISTED",
    "discount": null,
    "productVol": null,
    "invSelectionCount": {
        "red=small": 100,
        "red=medium": 200
    },
}
datatables jquery json javascript
2 Answers

You can use map on keys of invSelectionCount to return desired object

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

Run this snippet 

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>

user_80292110

Try to expand this: 

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