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

Я пытаюсь использовать 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

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

Можете ли вы создать JSFiddle?

— 06.02.2019 10:49

javascript jquery api datatables

06.02.2019 10:35

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Ваша проблема в том, что исходные данные, которые вы пытаетесь передать в 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>

Но мои данные из API

— 07.02.2019 03:34

как уже говорилось, нет проблем и с преобразованием ваших данных на стороне пользователя - как в этом примере

— 07.02.2019 08:51

06.02.2019 11:50