JQuery Datatables Ajax Datasource Error – Requested unknown parameter

I’m pretty stuck as to why I’m receiving this error from JQuery Datatables “DataTables warning: table id=myTable – Requested unknown parameter ‘0’ for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4″. I’ve tried to review the website info but it didn’t make much sense to me. My only guess is that it has something to do with the way the data may be formatted. If so, I’m unsure how to resolve the issue.

This chunk of code is getting the API so I can view it in the console and then again for the datatable data.

      var apiKey = "0ca80ddc-63f6-476e-b548-e5fb0934fc4b";
      $.ajax({
          type: "GET",
          url: "http://brew-roster-svc.us-e2.cloudhub.io/api/teams",
          headers: { "api-key": apiKey },
          success: function(result){
            console.log(result)
            console.log(JSON.stringify(result));
          }
      });
      $(document).ready( function () {
        $('#myTable').dataTable({          
          "ajax": {
            "url": "http://brew-roster-svc.us-e2.cloudhub.io/api/teams",
            "type": "get",
            "dataSrc": "",
            "beforeSend": function (request) {
              request.setRequestHeader("api-key", apiKey);
            },
            "columns": [
              { "data": "logo" },
              { "data": "name" },
              { "data": "league" },
              { "data": "division" },
            ],
          }
        });
      });

Here are the results from my debugging Ajax results in the console.

(30) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

This portion is a snippet of what I see when expanded:

0: {id: 133, nickname: 'Athletics', name: 'Oakland Athletics', location: 'Oakland', abbreviation: 'OAK', …}
1: {id: 134, nickname: 'Pirates', name: 'Pittsburgh Pirates', location: 'Pittsburgh', abbreviation: 'PIT', …}
[[Prototype]]: Array(0)

Answer

The main problem is you have placed your column definitions inside the ajax section of your DataTable. You need to move columns outside of that ajax option.

Also, the Ajax response uses leage instead of league – I assume that is just a spelling mistake – but you need to make the same spelling mistake in your column names.

$('#myTable').DataTable({
  "ajax": {
    "url": "http://brew-roster-svc.us-e2.cloudhub.io/api/teams",
    "type": "GET",
    "dataSrc": "",
    "beforeSend": function (request) {
      request.setRequestHeader("api-key", apiKey);
    }
  },
  "columns": [
    { "data": "logo" },
    { "data": "name" },
    { "data": "leage" },
    { "data": "division" }
  ]
});

Finally you are probably going to want to display the actual logo rather than a string showing the logo’s URL. For that, take a look at column rendering. For the logo column, you can use a renderer to create a string of HTML:

'<img src="' + data + '">'

In this case, the variable data is how the column renderer refers to the logo value.