Load simple JSON data error

toriacht

Hi

I am having trouble loading a simple JSON object

I try to load data of the following simple format

{
    "id": 21,
    "keyonename": "myfile.txt",
    "keytwototal": 22,
    "keythreelocation": 23
}

as follows (from file for testing)

    function getSummData(cb_func1) {
        $.ajax({
            url: "data/summ.json",
            success: cb_func1
        });
        console.log(cb_func1)
    }


    $(document).ready(function () {
        getSummaryData(function (data1) {
            //data = JSON.parse(data);
            console.log(data1)

            $('#summaryTable').DataTable({
                data: data1 ,
                "columns": [
                    {"data": "id"},
                    {"data": "keyonename"},
                    {"data": "keytwototal"},
                    {"data": "keythreelocation"},


                ]
            });

        });

    });

however the table always prints no data available. I have tried removing the data:data1 line but i get the same result.

If i modify the JSON to the following format

{
   "summ":{ [   "id": 21,
                     "keyonename": "myfile.txt",
                     "keytwototal": 22,
                      "keythreelocation": 23
                     ]}
}

and modify the data:data1 to data:data1.summ it will work however i cannot control the server format and i am unable to do this in practice.

Any help much appreciated.

kthorngren

Maybe its a copy/paste error but your function name (function getSummData(cb_func1)) is different than your function call (getSummaryData(function (data1). They need to be the same.

If the function returns a JSON string then you will need to use JSON.parse() to convert it to an object.

Finally, I think you will need to put the JSON response in an array as shown here:
https://datatables.net/manual/data/#Objects

Kevin

Tester2017

And if you try it this way?:

$('#summaryTable').DataTable(
{
    ajax: {url: `data/summ.json`, type: `POST`},

    columns: [
        {"data": "id"},
        {"data": "keyonename"},
        {"data": "keytwototal"},
        {"data": "keythreelocation"}
    ]
});

toriacht

Hi guys thanks for the replies...

hi @kthorngren , yes the getSumm was a copy and paste error. I already tried data1 = JSON.parse(data1); but i get a parse error.

hi @Tester2017 , I tried that but i get an error jquery.dataTables.js:3214 Uncaught TypeError: Cannot read property 'length' of undefined

Thanks again for the replies....

toriacht

Hi,

i've tried to convert the response to an array on the client side by the following...

 $(document).ready(function () {
        getSummaryData(function (data1) {
            var dataarray=new Array();
            dataarray.push(data1.toString());
            console.log(data1.toString());
            console.log(dataarray);
            console.log("here")

            $('#summaryTable').DataTable({
//                ajax: {url: 'data/summary.json', type: 'POST'},
                data: dataarray,

also tried

 var dataarray=new Array(data1);

and

 var dataarray=push(data1);

But i don;t think this is the correct way to do this in JS

toriacht

actually i was wrongin my last post...... i was actually right!!

var dataarray=new Array(data1);

OR

         var dataarray=new Array();
            dataarray.push(data1)

both work as follows

    $(document).ready(function () {
        getSummaryData(function (data1) {
            var dataarray=new Array();
            dataarray.push(data1);
            console.log(data1);
            console.log(dataarray);
            console.log("here")

            $('#summaryTable').DataTable({
                data: dataarray,
                "columns": [

Thank you again for taking the time to reply....