使用 ajax 从外部文件中提取 JSON 数据

Question

我目前正在手动拉取 JSON 以使用 bootstrap table 进行测试，但需要能够从外部文件中拉取，类似于我在这里所做的:

    $(document).ready(function() {
        $('#content').dataTable( {
            "ajax": 'test.log'
        });
    });

我目前正在手动设置数据并像这样循环：

$(document).ready(function () {
    var json = [{"data":{
        "Account": "1234",
            "Domain": "domain.com",
        "PlayerClass": "Player"},
        "level": "info",
        "message": "",
        "timestamp": "2015-06-11T15:11:03.425Z"
    },
               {"data":{
        "Account": "4567",
            "Domain": "domain.com",
        "PlayerClass": "Player"},
        "level": "info",
        "message": "",
        "timestamp": "2015-06-11T15:11:03.425Z"
    }];
    var tr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].data.Account + "</td>");
        tr.append("<td>" + json[i].data.Domain + "</td>");
        tr.append("<td>" + json[i].timestamp + "</td>");
        $('table').append(tr);
    }
});

显然之前使用 ajax 是应用数据表，所以我要么将其编写为只应用一个 .each() 循环，要么将其放入数据表中。

JSFIDDLE

中的当前版本

Answer 1

以上述格式加载数据的正确方法是使用以下 DataTables 初始化选项：

$('#example').DataTable({
    "ajax": {
        "url": "test.log",
        "dataSrc": ""
    },
    "columns": [
        { "data" : "data.Account" },
        { "data" : "data.Domain" },
        { "data" : "timestamp" }
    ]
});

因为您正在使用 Objects in your data, therefore you need to match object properties to table columns using columns.data。可以使用点分符号（例如，data.Account）来引用对象属性。

此外，ajax.dataSrc 选项设置为空字符串以表明您的 JSON 数据是一个数据数组。

请参阅 this JSFiddle 进行演示。请注意，该示例仅出于演示目的使用 mockjax 库来模拟通过 Ajax 加载 JSON 文件。在 url 选项中使用 URL 到您的实际文件。

使用 ajax 从外部文件中提取 JSON 数据

Pulling JSON data from external file with ajax

ajax

each

jquery

json

datatables