JSON data not filling up in DataTable

Question

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 have tried using the following AJAX call method with "data" and using the "columns" and using several trials and errors using both the "data" and the "columns" but my DataTable is still empty. Is there a reason what I am doing wrong as I am able to use this in another JSON file with the input shown in the most bottom but that JSON file is in the form of array. Thus, I am unsure what to do to fill up the DataTable with a JSON file that isn't an array.

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": "productId"},
      { "data": "originalPrice"},
      { "data": "productStatus"}
    ],
  }) 
  console.log("THIS IS THE DATA")
  console.log(data.productId)
  console.log(data.invSelectionCount)
  console.log(data.productId)
}) 

---

JSON File

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

---

Works For JSON File

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

Answer 1

Try the below Snippet. if you ajax result is coming as the above format, it will work fine

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>

Answer 2

I think DataTable should only accept list type data. You can try :

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

It will just wrap you object into a list.