Unable to Bind JSON Response to DataTable.

Tushit

<script type="text/javascript">
    $(function () {
        $('#ShowData').click(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: 'Default.aspx/fetchDetails',
                dataType: 'json',                    
                data: "{'JobID':'" + $('#txtJobID').val() + "'}",
                success: function (response) {
                    //var d = JSON.parse(data);
                    var data = response.d;
                    alert(typeof (data)); //gives out object
                    alert(response.d); //gives out object Object // Has data returned by server
                    $('#tblBasicInfo').DataTable({
                        paging: false,
                        data: response.d,
                        columns: [
                            { 'data': 'JobId' },
                            { 'data': 'UserId' },
                            { 'data': 'UserName' },
                            { 'data': 'Cas' },
                            { 'data': 'Question' },                                
                            { 'data': 'Language' },
                            { 'data': 'Appl' },
                        ]
                    });
                },
                error: function (xhr, ajaxoptions, thrownError) {
                    alert(xhr.responseText);
                    console.log(xhr.responseText);
                    console.log(xhr.responseJSON);
                }
            });
        });
    });
</script>

Here is my Java script code. Its In developer mode I have checked, I am getting JSON data for response.d variable. I have made sure columns matches the columns in response. troubleshooting this has taken entire day and I am losing it now. lol
please help

rajmalviya

var dataSet = JSON.parse(response);
var table = $('#tblBasicInfo').DataTable();
table
.clear()
.draw();
$('#tblBasicInfo').dataTable().fnAddData(dataSet);

kthorngren

Please post an example of your JSON response.

Kevin

rajmalviya

your response will json data like this [["1","2","john","cas","questions","english","apple"],["1","2","john","cas","questions","english","apple"],["1","2","john","cas","questions","english","apple"]];

var dataSet = JSON.parse(response);
var table = $('#tblBasicInfo').DataTable();
table
.clear()
.draw();
$('#tblBasicInfo').dataTable().fnAddData(dataSet);

may it will work

Tushit

Object
ApplId
:
300
Cas
:
283
JobId
:
542540564
Language
:
"ENG"
Question
:
"Q10101"
UserId
:
"fjdskf"
UserName
:
"fADSA, ASHDKS"
__type
:
"TEst.Job"
__proto__
:
Object

Tushit

This is the response I see in chrome debugger for response.d. Plus whenever I am using JSON.parse(response), its giving me

Unexpected token o in JSON at position 1

type error and wont go further

rajmalviya

Your data is already an object. No need to parse it. The javascript interpreter has already parsed it for you

https://stackoverflow.com/questions/15617164/parsing-json-giving-unexpected-token-o-error

kthorngren

Looks like you are returning one row of data. Even though its only one row it still needs to be in an array as shown in the data docs:
https://datatables.net/manual/data/#Objects

Kevin

Tushit

Yes. That is why I have commented it out. BUt even after getting proper response, I cant seem to figure out the reason why its giving me No data in table.

Tushit

I am returning an object of my class type. Are you saying I should be returning an array object instead of class type?

kthorngren

Currently what it looks like your server returning is this:

{
    ApplId: 300,
    Cas: 283,
    JobId: 542540564,
    Language: "ENG",
    Question: "Q10101",
    UserId: "fjdskf",
    UserName: "fADSA, ASHDKS",
    __type: "TEst.Job",
    __proto__: "",
}

Whether you are returning one row or multiple rows the objects need to be in an array, something like this:

[
  {
    ApplId: 300,
    Cas: 283,
    JobId: 542540564,
    Language: "ENG",
    Question: "Q10101",
    UserId: "fjdskf",
    UserName: "fADSA, ASHDKS",
    __type: "TEst.Job",
    __proto__: "",
  }
]

The Datatables ajax process looks for the data to be in an array.

Kevin

Tushit

The only way I could thing of doing that is by returning a string instead of an object. The problem is JSON.PARSE wont work for string as well. IT gives me the same error.