Заполнение столбца DataTable файлом JSON, но DataTable пуст

Question

$.ajax({
  'url': 'http://localhost:8080/Retail-war/webresources/products/allProducts',
  'method': 'GET',
  'contentType': 'application/json',
  'headers': {"Authorization": 'Bearer ' + sessionStorage.getItem('accessToken')},
}).done( function(data) {
  $('#existing-product').DataTable( {
    "columnDefs": [
      { "targets": -1, "data": null, "defaultContent": "<button>View More Details!</button>"}
    ],
    "aaData": data,
    "columns": [
      { "data": "products.productId"},
      { "data": "products.originalPrice"},
      { "data": "products.currentPrice"},
    ]        
  })

Это мой формат моего JSON файла, и я хотел бы заполнить DataTable тремя столбцами в продуктах, но в DataTable ничего не отображается и тоже не выдается никакой ошибки. Как заполнить каждый столбец столбцами в файле JSON в объекте products ?

  {
        "products": [
            {
                "productId": 1,
                "originalPrice": 60,
                "currentPrice": 50
            },
            {
                "productId": 2,
                "originalPrice": 80,
                "currentPrice": 70
            }
        ]
    }

Answer 1

Вместо того, чтобы обращаться к вашим данным, как это ...

// does not work
"data": data,
"columns": [
  { "data": "products.productId"},
  { "data": "products.originalPrice"},
  { "data": "products.currentPrice"}
]

Измените инициализатор на это:

// works
"data": data.products,
"columns": [
  { "data": "productId"},
  { "data": "originalPrice"},
  { "data": "currentPrice"}
]

DataTable нужен итерируемый объект, который вы будете использовать, чтобы находиться вне определения столбцов (где происходит итерация).

Эти изменения работают для меня (в моей урезанной версии вашего примера).

ОБНОВЛЕНИЕ :

В соответствии с просьбой, вот несколько дополнительных деталей для объяснения ситуации:

Если вы попытаетесь использовать "data": data,, то вы предоставляете JSON объект, который имеет эту структуру:

{"products": [an array of objects]}

Используется определениями columns для перебора вашего JSON. Но перебирать нечего - есть только один элемент - массив.

Однако, если вы сначала углубляетесь на один уровень в своей структуре с помощью "data": data.products, вы передаете следующее JSON к вашим определениям columns:

[{row 1 data}, {row 2 data}, ... {row n data}]

Это может быть выполнено с помощью DataTables для заполнения каждой строки в его таблице.

Вы все еще можете перейти к каждому объекту, который повторяется, если Есть вложенные объекты. В вашем случае нет вложенных объектов - но представьте, если ваши данные выглядят так (кстати, совершенно искусственный пример):

{
    "products": [{
        "productId": 1,
        "originalPrice": {
            "currency": "USD",
            "amount": 60
        },
        "currentPrice": 50
    }, {
        "productId": 2,
        "originalPrice": {
            "currency": "USD",
            "amount": 80
        },
        "currentPrice": 70
    }]
}

В этом случае мы можем получить доступ к данным следующим образом :

"data": data2.products,
      "columns": [
        { "data" : "productId" },
        { "data" : "originalPrice.amount" },
        { "data" : "currentPrice" }
      ]

Здесь мы видим использование точечной нотации для детализации объекта originalPrice, чтобы получить число, которое мы хотим отобразить: originalPrice.amount.

Answer 2

По умолчанию DataTables ожидает, что массив будет называться data. Вы можете изменить его, используя свойство dataSr c, но только если вы используете встроенную опцию DataTables Ajax, которая, честно говоря, рекомендуется в любом случае. Определите ваш DataTable следующим образом:

$('#existing-product').DataTable( {
    ajax: {
        url: "http://localhost:8080/Retail-war/webresources/products/allProducts",
        dataSrc: "products",
        headers: {"Authorization": 'Bearer ' + sessionStorage.getItem('accessToken')},
    }
});

В качестве альтернативы переименуйте ваш массив на сервере, прежде чем вы вернете его обратно в «data»