Прикрепление к телу не показывает данные в таблице

Question

Я пытаюсь добавить некоторые данные в тело Datatables. Я получаю данные, когда я console.log (), но данные не отображаются, когда я пытаюсь добавить их в свой Datatable (идентификатор моей таблицы, например, «example»). Я не знаю, где go с точки зрения отладки, а также.

    asyncRequest.then((tracks) => {
      var tableData = '';
      // rows
      for (track in tracks) {
        tableData += '<tr>';
        tableData += '<td>' + tracks[track]._id + '</td>';
        tableData += '<td>' + tracks[track].Position + '</td>';
        tableData += '<td>' + tracks[track].Track + '</td>';
        tableData += '<td>' + tracks[track].Artist + '</td>';
        tableData += '<td>' + tracks[track].Streams + '</td>';
        tableData += '<td>' + tracks[track].Url + '</td>';
        tableData += '<td>' + tracks[track].Date + '</td>';
        tableData += '</tr>';
      }
      console.log(tableData);

      $(document).ready(function () {
        var table = $('#example').DataTable();
        $(table).find('tbody').append(tableData);
      });
    });
  </script>

дорожки: [0 … 99] 0: _id: "5e8d677a6e5216bc865e084a" Position: 1 Track: "Dance Monkey" Artist: "Tones And I" Streams: 6155025 Url: "https://open.spotify.com/track/1rgnBhdG2JDFTbYkYRZAku" Date: "1/1/20"

Answer 1

Можете ли вы попробовать это сначала уничтожить, затем добавить, затем обновить sh it

и поставить ваш документ готовым из запроса и инициализировать там

$(document).ready(function () {
        var table = $('#example').DataTable();

      });

, затем после того, как вы примете данные это уничтожит его и обновит sh это

asyncRequest.then((tracks) => {
      var tableData = '';
      // rows
      for (track in tracks) {
        tableData += '<tr>';
        tableData += '<td>' + tracks[track]._id + '</td>';
        tableData += '<td>' + tracks[track].Position + '</td>';
        tableData += '<td>' + tracks[track].Track + '</td>';
        tableData += '<td>' + tracks[track].Artist + '</td>';
        tableData += '<td>' + tracks[track].Streams + '</td>';
        tableData += '<td>' + tracks[track].Url + '</td>';
        tableData += '<td>' + tracks[track].Date + '</td>';
        tableData += '</tr>';
      }
      console.log(tableData);


      $('#example').DataTable().destroy();
      $('#example').find('tbody').append(str);
      $('#example').DataTable().draw();
    });