Получение данных из файла JSON в таблицы данных jQuery

#javascript #jquery #html #json #datatables

#javascript #jquery #HTML #json #таблицы данных

Вопрос:

Я пытаюсь добавить данные add из файла JSON, который я сгенерировал из скрипта Django.

Это формат файла JSON:

 [
{
    "6": "yo1",
    "1": "2019-04-04",
    "4": "yo1",
    "3": "yo1",
    "2": "yo1",
    "5": "yo1"
},
{
    "6": "yo2",
    "1": "2019-04-08",
    "4": "yo2",
    "3": "yo2",
    "2": "yo2",
    "5": "yo2"
}
] 
  

JavaScript:

 let url = `/api/?site=${filters.site_filter}amp;sd=${filters.sd}amp;ed=${filters.ed}amp;report_type=yo`;

 $.getJSON(url, function(data) {data.forEach(d => {
        console.log(data);
        $('#video_data').DataTable( {
            "ajax": allData
            columns: [
            { title: "1" },
            { title: "2" },
            { title: "3" },
            { title: "4" },
            { title: "5" },
            { title: "6" }
            ]
        } );
    })
})
  

HTML-код:

 <table border="1" id="video_data">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Site</th>
                    <th>Page Type</th>
                    <th>Device Type</th>
                    <th>Video Player Name</th>
                    <th>AB Test</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                </tr>
            </tbody>
        </table>
  

Результат этого выдает мне только Loading сообщение, а также я получаю эту ошибку каждый раз, когда загружаю страницу: DataTables warning: table id=video_data - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Я не уверен, что я делаю не так?

Комментарии:

1. Какое значение allData ?

2. Избавьтесь от forEach . Вы инициализируете плагин на каждой итерации этого цикла. Также не требуется опция «ajax», если вы выполняете свой собственный запрос

Ответ №1:

Я вижу пару вещей, которые выглядят неправильно с этим.

Первым параметром .getJSON должен быть путь к файлу json. Судя по всему, allData это не путь.

Кроме того, вы просматриваете каждый элемент из getJson ответа и снова и снова инициализируете свою таблицу данных.

Наконец, чтобы инициализировать таблицу с помощью набора данных, используйте свойство data , а не ajax . Должно выглядеть примерно так:

 var url = 'path/to/json/file.json';
$.getJSON(url, function(data) {
  $('#video_data').DataTable({
    data: data
  });
})
  

Комментарии:

1. Спасибо! Но теперь я получаю сообщение об DataTables warning: table id=video_data - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4 ошибке