Error using jQuery datatable

Question

I am using jquery data table to list result. datatable is making a ajax call to fetch data. I can see from console log that data is retrieved properly. But it does not render correctly. I am getting error as

DataTables warning (table id = 'datatable'): Requested unknown parameter '2' from the data source for row 1.

There are 3 columns in the UI. "Country" column is populated with "U" and "Name" column is populated with "S". Where it should be "US" in country column, bank name in the second column and address in 3rd column. Not sure what I am missing. Any help is greatly appreciated.

<table id="datatable" class="display dataTable">
    <thead>
        <th>Country</th>                            
        <th>Bank</th>
        <th>Address</th>
    </thead>
    <tbody>
    </tbody>
</table>

function searchBanks() {
    initSearchTable();
    populateBanks();
}

var oBankTable;

function initSearchTable() {
    oBankTable = $('#datatable').dataTable({
        "sAjaxDataProp": "bank",
        "bPaginate": false,
        "bFilter": false,
        "bLengthChange": false,
        "bInfo": false,
        "bAutoWidth": false,
        "bJQueryUI": true,
        "bDeferRender": true,
        "aoColumns": [
            { "mData": "country", sDefaultContent: "" },
            { "mData": "name" , sDefaultContent: ""},
            { "mData": "address" , sDefaultContent: ""}
        ]        
    });
}

function populateBanks() {
    var endClientRequest = $.ajax({
        url: "../api/banks",
        type: "GET",
        dataType: "json"
    });
    endClientRequest.done(function (response) {
        oBankTable.fnClearTable();
        for(var i=0; i< response.bank.length ; i++) {
            var tmp_bank = response.bank[i];
            console.log(tmp_bank.country + "**" + tmp_bank.name + "**" +  tmp_bank.city + "**" +  tmp_bank.address + "**" +  tmp_bank.swiftBIC);
            oBankTable.fnAddData(tmp_bank.country, tmp_bank.name, tmp_bank.city, tmp_bank.address, tmp_bank.swiftBIC);
        }      

        return false;
    });

    endClientRequest.fail(function (jqXHR, textStatus) {
        console.log("request failed");
        show_error_dialog("Unable to connect to the server at present to retrieve the detail.");
        return false;
    });
    return false;
}

JSON Response:

{
    "banks": [{
        "country": "US",
        "name": "Bank1",
        "address": "Address 1",
    }, {
        "country": "US",
        "name": "Banks2",
        "address": "Address 2",
    }
]}

Answer 1

You may need to remove the "," after the address tag.

{
    "banks": [{
        "country": "US",
        "name": "Bank1",
        "address": "Address 1"
    }, {
        "country": "US",
        "name": "Banks2",
        "address": "Address 2"
    }
]}

you can validate json in http://jsonlint.com/