JSON данные не заполняются в DataTable

Question

У меня есть файл JSON со следующими значениями, и я пытаюсь заполнить DataTable значениями файла JSON. Я попытался использовать следующий метод вызова AJAX с «данными» и использовать «столбцы» и использовать несколько проб и ошибок, используя как «данные», так и «столбцы», но моя таблица данных все еще пуста. Есть ли причина, по которой я поступаю неправильно, поскольку я могу использовать это в другом файле JSON с входом, показанным в самом низу, но этот файл JSON имеет форму массива. Таким образом, я не уверен, что делать, чтобы заполнить DataTable файлом 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": "productId"},
      { "data": "originalPrice"},
      { "data": "productStatus"}
    ],
  }) 
  console.log("THIS IS THE DATA")
  console.log(data.productId)
  console.log(data.invSelectionCount)
  console.log(data.productId)
}) 

---

JSON Файл

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

---

Работает для JSON Файл

[
    {
        "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

Я думаю, что DataTable должен принимать только данные типа списка. Вы можете попробовать:

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

Это просто поместит ваш объект в список.

Answer 2

Попробуйте приведенный ниже фрагмент кода. если вы получите ajax результат в формате, указанном выше, он будет работать нормально

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>