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

Michalzeszen · March 2022

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 · March 2022

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 · March 2022

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 · March 2022

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 · March 2022

@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 · March 2022

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 · March 2022

@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 · March 2022

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 · March 2022

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 · March 2022

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

kthorngren · March 2022

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

Kevin

Michalzeszen · March 2022

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 · March 2022

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 · March 2022

@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 · March 2022

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 · March 2022

@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 · February 19

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 · February 19

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

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

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

Answers

Howdy, Stranger!

Categories

DataTables

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

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

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables