Javascript 附加到tbody而不在表中显示数据

我试图将一些数据附加到Datatables tbody。我在console.log（）数据时确实收到了数据，但当我尝试将数据附加到我的Datatable时，数据没有显示（顺便说一句，我的表的id是“示例”）。我也不知道在调试方面该往哪里走

    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>

asyncRequest.then（（曲目）=>{
var tableData=“”；
//排
用于（轨道中的轨道）{
tableData+=“”；
tableData+=''+曲目[曲目]。\u id+''；
tableData+=''+轨迹[轨迹]。位置+''；
tableData+=''+轨道[轨道]。轨道+''；
tableData+=''+曲目[track].Artister+''；
tableData+=''+轨迹[track].Streams+''；
tableData+=''+曲目[track].Url+''；
tableData+=''+曲目[曲目]。日期+''；
tableData+=''；
}
console.log（tableData）；
$（文档）.ready（函数（）{
变量表=$（“#示例”）.DataTable（）；
$（表）.find（'tbody'）.append（表数据）；
});
});

曲目：

[0…99]
0:
_id:“5e8d677a6e5216bc865e084a”
职位：1
曲目：“舞猴”
艺术家：“色调与我”
溪流：6155025
Url:“https://open.spotify.com/track/1rgnBhdG2JDFTbYkYRZAku"
日期：“1/1/20”

你能先尝试一下这个吗？先销毁，然后追加，然后刷新

并根据要求准备好您的文档并在那里初始化

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

      });

然后，在你获取数据后，销毁它并刷新它

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();
    });

asyncRequest.then（（曲目）=>{
var tableData=“”；
//排
用于（轨道中的轨道）{
tableData+=''；
tableData+=''+曲目[曲目]。\u id+''；
tableData+=''+轨迹[轨迹]。位置+''；
tableData+=''+轨道[轨道]。轨道+''；
tableData+=''+曲目[track].Artister+''；
tableData+=''+轨迹[track].Streams+''；
tableData+=''+曲目[track].Url+''；
tableData+=''+曲目[曲目]。日期+''；
tableData+=''；
}
console.log（tableData）；
$（'#示例'）.DataTable（）.destroy（）；
$（“#示例”）.find（'tbody'）.append（str）；
$（'#示例'）.DataTable（）.draw（）；
});

u应该重新加载表。数据表通常不是这样使用的。它通常接收包含要显示的数据的JSON对象。看看各种方法。@andrewjames他们数据集中的数据是一个数组数组。。。我的数据集是一个JSON对象（对象数组），因此当我尝试这种方法时，会收到一个警报

DataTables警告：table id=example-请求的第0行第0列的未知参数“0”。有关此错误的详细信息，请参阅http://datatables.net/tn/4

True，但这只是一种可能的结构。您能否编辑您的问题，以显示您的数据的代表性样本？请查看。其中一个可能与JSON的结构相匹配。列表中的前4个是最常见的。

TypeError:table.fnDestroy不是一个函数

我在这里的示例中添加了哪些库可以使用。你是否可以在示例中更改你的库，并再次尝试Hank you@ğağrı以供将来参考，而不是以这种方式操纵内容，最好使用DataTables中内置的功能来处理JSON。例如，请参见。由于内容更改而销毁DataTable对象通常不是最佳方法。这当然有效，但可能有更好的方法。