Unable to process data due to invalid data type

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 😃

[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!)