DataTables warning: table id=myTable - Requested unknown parameter 'Codigo' for row 0, column 0.

Michalzeszen

Link to test case: https://jsfiddle.net/michalzeszen/dy8gqj0n/19/#
Debugger code (debug.datatables.net): ">https://debug.datatables.net/esurom

Error messages shown: DataTables warning: table id=myTable - Requested unknown parameter 'Codigo' for row 0, column 0.
Description of problem: It seems I'm not setting my headers correctly, but I'm not sure.

The debugger isnt showing me any code, so I'm uploading a print of the debugger here.

kthorngren

Instead of using this:

"data": "https://api.jsonbin.io/b/62300664a703bb67492bd3fc",

Use the ajax option to fetch the data via ajax, like this:

"ajax": "https://api.jsonbin.io/b/62300664a703bb67492bd3fc",

The data option is used for Javascript sourced data.

Kevin

Michalzeszen

Helo @kthorngren.

I did the exchange but that didn't change the outcome. Could you further investigate?

Apparently it is breaking when reading "k.length".

kthorngren

Apparently it is breaking when reading "k.length".

That could be many things. You can upload a new debug image for the developers to look at while using the ajax option. They can look at what is returned in the XHR response.

Some troubleshooting steps to take:

• Make sure the numebr of column headers you have in HTML matches the number of columns defined in Datatables.
• Verify the data returned from the server matches your columns.data structure and that it matches a structure supported by Datatables. See the Data docs and Ajax docs for details. Use the browser's network inspector to see the XHR response.
• Paste a sample of the XHR Response here so we can take a look. It will be in the debug image but only the developers have access.

Kevin

Michalzeszen

@kthorngren
The output is exactly the same. I used "data" because for my tests I have a local json. Using ajax returns the exact same output as before, since the data source wasn't the issue:

The XHR response is empty, weirdly.

If you're willing to, the JSfiddle I posted have everything necessary for testing. Perhaps someone smarther than me can figure it out.

kthorngren

I used "data" because for my tests I have a local json.

That won't work. The data docs state it expects an array. The data option is used to load Javascript sourced data. It won't read from a local file. See this example.

If you want to load JSON data then use the ajax option. You will need a web server to handle the request and respond with the data. Due to web browser security you won't be able to use an ajax request to load a local file. The web server can be local to your machine.

Kevin

Michalzeszen

@kthorngren Kevin, I fully understood your statement and used ajax right after your first reply. The source of the data isn't the issue.

Since "ajax": "https://api.jsonbin.io/b/62300664a703bb67492bd3fc", is returning me rows, the data is being dowloaded.

I ask you to refer to the JSfiddle, since it is my latest code.

Michalzeszen

Right now, I'm getting the error above:
DataTables warning: table id=myTable - Requested unknown parameter 'Id' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

From what I understand, the loop used to build the data into the table isn't understanding properly the indentation of my json. This is where I need support.

"Id" is present in the dataset:

kthorngren

I ask you to refer to the JSfiddle, since it is my latest code.

It still has "data": "https://api.jsonbin.io/b/62300664a703bb67492bd3fc", which is giving the error you noted.

Since "ajax": "https://api.jsonbin.io/b/62300664a703bb67492bd3fc", is returning me rows, the data is being dowloaded.

Paste a sample of the XHR Response here so we can take a look. It will be in the debug image but only the developers have access.

Maybe you need to use ajax.dataSrc to point to your data source. Please see the Ajax data source docs for details.

Kevin

Michalzeszen

I wasn't authenticated in the JSfiddle, just updated it.

kthorngren

Is there a new link? The original is still the original code.

Kevin

Michalzeszen

Ops, here:

https://jsfiddle.net/michalzeszen/dy8gqj0n/46/

I got us a XRH response:

{"0":{"Id":["07853842000135"],"Name":["name 1"],"ParentId":[""],"ParentName":["name 2"],"Brand":["name 3"],"API":["admin"]},"1":{"Id":["07853842000135"],"Name":["name 4"],"ParentId":[""],"ParentName":["name 5"],"Brand":["name 6"],"API":["channels"]},"2":{"Id":["07853842000135"],"Name":["name 7"],"ParentId":[""],"ParentName":["name 8"],"Brand":["name 9"],"API":["discovery"]},"3":{"Id":["07853842000135"],"Name":["name 10"],"ParentId":[""],"ParentName":["name 11"],"Brand":["name 12"],"API":["products-services"]},"4":{"Id":["01736243000155"],"Name":["name 13"],"ParentId":["03046391000173"],"ParentName":["name 15"],"Brand":["name 16"],"API":["admin"]},"5":{"Id":["01736243000155"],"Name":["name 17"],"ParentId":["03046391000173"],"ParentName":["name 18"],"Brand":["name 19"],"API":["discovery"]},"6":{"Id":["01736243000155"],"Name":["name 20"],"ParentId":["03046391000173"],"ParentName":["name 21"],"Brand":["name 22"],"API":["products-services"]}}

At this stage is where I get the "k.length". I'm quite sure I'm not building my columns properly, because of the way my json is build.

kthorngren

There are a couple problems. The big one is that Datatables expects array of row data. The JSON is objects. See the ajax and data docs I posted above.

The second is the ajax.dataSrc needs to be inside the ajax object. Something like this:

$('#myTable').DataTable( {
    ajax: {
        url: 'https://api.jsonbin.io/b/62300664a703bb67492bd3fc/1',
        dataScr: ''
    },
    columns: [
        { data: 'Id' },
        { data: 'Name' },
        { data: 'ParentId' },
        { data: 'ParentName' },
        { data: 'Brand' },
        { data: 'API' }
    ]
} );

Last you need to supply a thead. You can add in htML or use columns.title.

Kevin

Michalzeszen

@kthorngren

After fiddling, I managed to eliminate the "k.length" error, but the table doesn't render any data:

$('#myTable').DataTable( {
    "ajax": {
        "url": 'https://api.jsonbin.io/b/62300664a703bb67492bd3fc/1',
        "dataSrc": '',
    },
     columns: [
        { title: 'Id'},
        { title: 'Name' },
        { title: 'ParentId' },
        { title: 'ParentName' },
        { title: 'Brand' },
        { title: 'API' },
        { data: 'Id' },
        { data: 'Name' },
        { data: 'ParentId' },
        { data: 'ParentName' },
        { data: 'Brand' },
        { data: 'API' }
    ]
} );

I'm not sure what I'm missing here, because as far as I could understand, the code above follows the documentation to object sources. My sources doesnt have a "data" or any other name, so I'm setting it to dataSrc: "":

The payload is loaded correctly on the browser.

kthorngren

Datatables expects the rows to be in an array. Your data looks like this:

{
    "0": {
        "Id": ["07853842000135"],
        "Name": ["name 1"],
        "ParentId": [""],
        "ParentName": ["name 2"],
        "Brand": ["name 3"],
        "API": ["admin"]
    },
    "1": {
        "Id": ["07853842000135"],
        "Name": ["name 4"],
        "ParentId": [""],
        "ParentName": ["name 5"],
        "Brand": ["name 6"],
        "API": ["channels"]
    },
...
}

For Datatables it needs to be like this:

{
  [
    {
        "Id": ["07853842000135"],
        "Name": ["name 1"],
        "ParentId": [""],
        "ParentName": ["name 2"],
        "Brand": ["name 3"],
        "API": ["admin"]
    },
    {
        "Id": ["07853842000135"],
        "Name": ["name 4"],
        "ParentId": [""],
        "ParentName": ["name 5"],
        "Brand": ["name 6"],
        "API": ["channels"]
    },
  ]
}

In your data each row is an object, ie, 0, 1. Datatables doesn't support this structure.

Kevin

Michalzeszen

@kthorngren I'm not really sure how python generated the json with index numbers before each object, but I went back to the python code to understand what was going on, and in the first run it generated a json without said indexes.

After changing the json it works like a charm.

Thanks for helping!

FabianoFranca

The name of the "data" fields must be lowcase as below.

$('#myTable').DataTable( {
ajax: {
url: 'https://api.jsonbin.io/b/62300664a703bb67492bd3fc/1',
dataScr: ''
},
columns: [
{ data: 'id' },
{ data: 'name' },
{ data: 'parentId' },
{ data: 'parentName' },
{ data: 'brand' },
{ data: 'api' }
]
} );

allan

The name of the "data" fields must be lowcase as below.

That's not the case. Rather, it must match the case of the data being returned. In the examples above, there was a leading capital, so having columns.data match that is correct. If in your own case the data property names are all lower case, then yes, you would use lowercase property names.

Allan