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

Question

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

    $(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 是应用 DataTables，所以我要么需要编写它以应用 .each() 循环，要么将其放入 DataTable。

JSFIDDLE

中的当前版本

Answer 1

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

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

由于您在数据中使用Objects，因此您需要使用columns.data 将对象属性与表列匹配。可以使用点分符号（例如，data.Account）来引用对象属性。

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

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