Tabulator: Unable to process data due to invalid data type

[Rodbjartson]

Hey there!
I saw a very similiar post here, but the answer did not help me, so please help me!
Our company decided to give this plugin a shot, and it looks like a great way to display data in tables; I think I already have fallen in love with it!

I am currently facing a problem however, when I want to load data into a table from my VB.net backend page using an ajax request.
This is the error I get:

Data Loading Error - Unable to process data due to invalid data type
Expecting: array
Received: object
Data: {d: "[{"id":1,"name":"Bryon Hetrick","age":43,"dob":""}…{"id":1,"name":"Rose Hetrick","age":33,"dob":""}]"}

My code looks like this:

Table:

$("#example-table").tabulator({
                height: 205, // set height of table, this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
                layout: "fitColumns", //fit columns to width of table (optional)
                columns: [ //Define Table Columns
                    { title: "Name", field: "name", width: 150, align: "center" },
                    { title: "Age", field: "age", align: "left", formatter: "progress" },
                    { title: "Favourite Color", field: "col", align: "center" },
                    { title: "Date Of Birth", field: "dob", sorter: "date", align: "center" },
                ],

            });

OnClick on a button that fires ajax request:

 $('#btnajax').on('click', function (e) {
                console.log("ajax request button clicked");

                var ajaxConfig = {
                    type: "POST", //set request type to Position
                    contentType: 'application/json; charset=utf-8', //set specific content type
                };

                $("#example-table").tabulator("setData", "PurchaseOrder.aspx/returnfunc", {}, ajaxConfig); //make ajax request with advanced config options

            });

Thanks in advance :)

[sayzamora]

Yesterday, I had the same problem. I do this.

var data = { code: code, date: date}
$.ajax({
url: "pagina.aspx/GetpaginaData",
type: "POST",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: JSON.stringify(data),
beforeSend: function () {
// $(".l-preloader").show();
spinner.spin(spinnerTarget);
},
success: function (data) {
var json = data.d;

                $("#gridpaginaMaster").tabulator("clearData")
                                      .tabulator("setData", json);
                spinner.stop();
            },
            error: function (xhr, textStatus, errorThrown) {
                manageError(xhr, textStatus, errorThrown);
                spinner.stop();
            },
            complete: function (XMLHttpRequest, textStatus) {
                console.log(textStatus);
                console.log(XMLHttpRequest);

            }
        });

[olifolkerd]

Hey @Rodbjartson,

Thanks for your kind words, it is always great to hear people are enjoying using Tabulator

The issue you are having is because you are passing in an object where the data is contained inside the d property of the returned object and Tabulator is expecting an array of objects, If this is how you need to format the response to the request this is no issue. you can use the ajaxResponse function to tell Tabulator how to handle the response:

$("#example-table").tabulator({
    columns:[...],
    ajaxResponse:function(url, params, response){
        //url - the URL of the request
        //params - the parameters passed with the request
        //response - the JSON object returned in the body of the response.

        return response.d; //return the d property of a response json object
    },
});

Let me know if that helps,

Cheers

Oli

[Rodbjartson]

Thanks for the fast reply, I do not understand this though, I might be a little confused on what I get back and what it expects.

The ajaxresponse function, shall I use this instead of setData etc???
Say this is the data I get back from my ajax call:

{d: Array(4)}
d
:
Array(4)
0
:
{__type: "CARS.Person", id: 1, name: "Bryon Hetrick", age: 43, dob: ""}
1
:
{__type: "CARS.Person", id: 1, name: "Amanda Hetrick", age: 41, dob: ""}
2
:
{__type: "CARS.Person", id: 1, name: "Diamond Hetrick", age: 17, dob: ""}
3
:
{__type: "CARS.Person", id: 1, name: "Rose Hetrick", age: 33, dob: ""}

It is basically a list of objects(Person objects).
How could I handle this?

If this is my code:

```
$("#example-table").tabulator({
height: 205, // set height of table, this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ //Define Table Columns
{ title: "Name", field: "name", width: 150, align: "center" },
{ title: "Age", field: "age", align: "left", formatter: "progress" },
{ title: "Favourite Color", field: "col", align: "center" },
{ title: "Date Of Birth", field: "dob", sorter: "date", align: "center" },
],

         });

var ajaxConfig = {
type: "POST", //set request type to Position
contentType: 'application/json; charset=utf-8', //set specific content type
};

             $("#example-table").tabulator("setData", "PurchaseOrder.aspx/returnfunc", {}, ajaxConfig); //make ajax request with advanced config options

       });

```

How can I change this to handle this response? Thanks in advance!!

[olifolkerd]

Hey,

If you are making the ajax request as soon as you have built the table then you can set it in the table constructor object. the ajaxResponse function also wants to be added to your constructor object:

 $("#example-table").tabulator({
    height: 205, // set height of table, this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    layout: "fitColumns", //fit columns to width of table (optional)
    ajaxURL:"PurchaseOrder.aspx/returnfunc",
    ajaxConfig:"POST",
    ajaxResponse:function(url, params, response){
        //url - the URL of the request
        //params - the parameters passed with the request
        //response - the JSON object returned in the body of the response.

        return response.d; //return the d property of a response json object
    },
    columns: [ //Define Table Columns
        { title: "Name", field: "name", width: 150, align: "center" },
        { title: "Age", field: "age", align: "left", formatter: "progress" },
        { title: "Favourite Color", field: "col", align: "center" },
        { title: "Date Of Birth", field: "dob", sorter: "date", align: "center" },
    ],
});

Just to clarify the expected data, Tabulator is expecting this:

[
    {...row object...},
    {...row object...}
]

You are returning this:

{
    d:[
        {...row object...},
        {...row object...},
    ]
}

The ajaxResponse function tells Tabulator to look for the data in the d property of the object you are returning

Cheers

Oli

[Rodbjartson]

Thanks a ton! This worked!
(I have one more question, but it is very different, so I will probably ask a new question later today!)