Pulling JSON data from external file with ajax

Question

I am currently pulling in JSON manually to test with a bootstrap table, but need to be able to pull from an external file, similar to how I was doing here:

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

I'm currently manually setting data and looping through it like so:

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

Obviously the previous use of ajax was applying DataTables, so I either need to write it to just apply an .each() loop, or throw it into a DataTable.

Current version in JSFIDDLE

Answer 1

Correct way to load the data in the format shown above would be to use the following DataTables initialization options:

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

Since you're using Objects in your data, therefore you need to match object properties to table columns using columns.data. It possible to use dotted notation (for example, data.Account) to refer to object properties.

Also, ajax.dataSrc option is set to empty string to indicate that your JSON data is an array of data.

See this JSFiddle for demonstration. Please note, that example uses mockjax library to simulate loading of the JSON file via Ajax for demonstration purposes only. Use URL to your actual file in url option.