JQuery Datatables из массива объектов API не работает - PullRequest
Новая
       1

JQuery Datatables из массива объектов API не работает

0 голосов
/ 06 февраля 2019

Я пытаюсь использовать jQuery DataTables в моем проекте.Но у меня проблема, потому что она не работает с моим кодом.

Вот мой пример API 

{
    "single": [
     {
         "name": "Jessica"
     }, 
     {
         "name": "John"
     },{
         "name": "Jasmine"
     }
    ],
    "married": [
     {
         "name": "Alpa"
     }, 
     {
         "name": "Haifa"
     },{
         "name": "Teala"
     }
    ]
}

Вот мой пример Datatables, но он не работает. 

    $('#table').DataTable({
        responsive: true,
        ajax: {
           url: 'http://localhost:22222/api/status/',
           method: 'GET',
           xhrFields: {
              withCredentials: true
              }
           },
           columns: [
              { data: "single.name"}
           ]
        });
    });

У меня ошибка на консоли:

Uncaught TypeError: Cannot read property 'length' of undefined

Заранее спасибо.

1 Ответ

0 голосов
/ 06 февраля 2019

Ваша проблема в том, что исходные данные, которые вы пытаетесь передать в DataTables, не структурированы должным образом - в массиве / объекте, который вы используете в качестве исходных данных, каждая запись должна соответствовать строке таблицы.

Итак, вам нужно либо изменить формат данных на стороне сервера (более предпочтительно), либо вы можете постобработать его на стороне пользователя: 

var srcData = {
    "single": [
     {
         "name": "Jessica"
     }, 
     {
         "name": "John"
     },{
         "name": "Jasmine"
     }
    ],
    "married": [
     {
         "name": "Alpa"
     }, 
     {
         "name": "Haifa"
     },{
         "name": "Teala"
     }
    ]
};
//Transform srcData so each entry corresponds to table row
const transformData = data => {
	let res = [];
  data.single.forEach(entry => res.push({name:entry.name,status:'single'}));
  data.married.forEach(entry => res.push({name:entry.name,status:'married'}));
  return res;
};

srcData = transformData(srcData);

//Render datatable itself
$('#mytable').DataTable({
	data: srcData,
  sDom: 't',
  columns: [{title:'Name', data:'name'},{title:'Status', data:'status'}]
});
<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <table id="mytable"></table>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...