DataTables 将源数组包含在 JSON“数据”属性中答案

【问题标题】：DataTables enclose source array into JSON 'data' propertyDataTables 将源数组包含在 JSON“数据”属性中
【发布时间】：2019-11-18 09:35:25
【问题描述】：

我正在尝试使用通过 jQuery ajax GET 请求获得的数据创建一个数据表。 GET 请求返回格式中的所有对象

[{
    "id": "88776",
    "employee_name": "JohnhmO",
    "employee_salary": "13973",
    "employee_age": "19",
    "profile_image": ""
},
{
    "id": "88778",
    "employee_name": "jbmvy",
    "employee_salary": "123",
    "employee_age": "23",
    "profile_image": ""
}]

我需要将源数组包含在 JSON 'data' 属性中，以便数据表可以读取它。

我尝试过解析为 JSON。我试过unshift。

var dataSet = '';
$.ajax({
    url: 'http://dummy.restapiexample.com/api/v1/employees',
    type: 'GET',
    datatype: 'json'
}).done(function (data) {
    console.log(data);
    dataSet = data;
})
function unshiftFunc(dataSet) {
    dataSet.unshift('data:');
}
console.log(dataSet)

我正在寻找的是这个：

{
    "data": [{
        "id": "88776",
        "employee_name": "JohnhmO",
        "employee_salary": "13973",
        "employee_age": "19",
        "profile_image": ""
    },
    {
        "id": "88778",
        "employee_name": "jbmvy",
        "employee_salary": "123",
        "employee_age": "23",
        "profile_image": ""
    }]
}

【问题讨论】：

What I'm looking for is this: 这不是有效的 JSON。
JSON 无论如何都不相关；您将要解析 JSON 字符串并最终得到一个JavaScript 数组。您不能在数组的开头添加标签；这是无意义的语法。

标签： javascript jquery json ajax datatables

【解决方案1】：

您可能的意思是将返回的数组放入一个对象中，并以属性名称data 为键。在这种情况下，只需创建一个对象，并将您的数据分配给 data 属性。

.done(function(data){
   dataSet = { data: data };
})

顺便说一下，console.log(dataSet) 将返回 undefined，因为 $.ajax 是异步的。您必须在 done 的回调中执行此操作，才能知道 AJAX 解析后 dataSet 的样子。

【讨论】：

虽然这是一个完全有效的 jQuery 答案，但从 DataTables API 的角度来看是不合适的。如果 OP 继续他目前的方法，他将不得不清除/销毁 DataTable 以刷新它（这是一种性能浪费）。此外，如果他尝试实现某些功能，他可能会遇到各种 AJAX 问题，并导致一些关键的 DataTables API 方法无效。相反，ajax 选项应建议使用正确的dataSrc 值（请参阅我的answer）。

【解决方案2】：

如果您使用 ajax 选项而不是 external $.ajax() 调用，您可以保持 JSON 原样并仍然成功填充 DataTables，这可能会让您遇到不同类型的问题：

$('table').DataTable({
   ...
   ajax: {
      url: 'http://dummy.restapiexample.com/api/v1/employees',
      type: 'GET',
      dataSrc: ''
   }
});

选项dataSrc: ''indicates，您的源数据是未包含在任何特定属性中的对象数组。

【讨论】：

啊，好吧，约瑟夫在下面的评论是有道理的，但我知道这会怎样弄乱桌子。效果很好，谢谢！

【解决方案3】：

您始终可以使用Array.concat() 以您想要的方式添加内容。

data = ["data"].concat(data);

【讨论】：