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

Gyrocode.com · Accepted Answer · 2015-06-11 17:45:19Z

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.

edited Jun 11, 2015 at 17:45

answered Jun 11, 2015 at 17:14

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Matt Over a year ago

This is going in the right direction, but I need to be able to load the json from a file, not hard coded into responseText.

Gyrocode.com Over a year ago

@Matt, JSFiddle 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.

Matt Over a year ago

I have it working now, but its oddly adding blank rows with each row in the json, when called like so: "ajax": "test.log", "columns": [`` { "data" : "Account" }, { "data" : "Domain" } ]

Gyrocode.com Over a year ago

@Matt, see my answer again about using dotted notation such as data.Account and data.Domain and not Account and Domain.

Matt Over a year ago

Yes, I tried that, but no data loads and I get the error: DataTables warning: table id=example - Requested unknown parameter 'data.Account' for row 0.

|

Collectives™ on Stack Overflow

Pulling JSON data from external file with ajax

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related