json data is unvisible

[sojin]

 

Hi. I want to show a basic grid and I could bring json data but I can't show my data on the page.

My sample data set is here.

{

  "elapsedTime" : 0,

  "status" : "OK",

  "errors" : [ ],

  "message" : "",

  "timestamp" : "2021-11-24 09:50:29",

  "bodyType" : "ARRAY",

  "body" : [ {

    "id" : 88,

    "bloodSugar" : "86"

 

  }, {

    "id" : 89,

    "bloodSugar" : "86"

 

  } ]

}

 

My JS code is here.

$(document).ready(function(){

        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: "my json call url",
                    }
                },
                schema: {
                    model: {
                        fields: {
                            id: {type: "string" },
                            bloodSugar: {type: "string"}
                        }
                    }
                },
                pageSize: 0,
                serverPaging: true,
                selectable: true,
                serverSorting: true
            },
            height: 550,
            sortable: true,
            filterable: true,
            pageable: true,
            columns:  [
                {field: "id", title: "id"},
                {field: "bloodSugar", title: "bloodSugar"}
            ]
        });
    });

I could see the json data at my chrome network console but I can't see the data at html view.

I want to know what is the problem...

please help me. Thank you.

[Neli]

Hi,

Could you please try to configure the dataSource schema.data and check if this will resolve the issue?

As far as I see from the provided snippet, the data for the Grid is returned in the field "body", so you could add the following:

schema: {
    data: "body" ,
    .....
 }

I hope this helps.

Regards,

Neli
Progress Telerik

[sojin]

Hmmmmmmm.......

It didn't work...

I changed json formmat to next one.

{
  "elapsedTime" : 0,
  "status" : "OK",
  "errors" : [ ],
  "message" : "",
  "timestamp" : "2021-11-24 09:50:29",
  "bodyType" : "ARRAY",
  "body" : {
    "content" :[ {
    "id" : 88,
    "bloodSugar" : "86"
 
  }, {
    "id" : 89,
    "bloodSugar" : "86"
 
  } ]
}
}

and I change my code like this.

$(document).ready(function(){

        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: "my json call url",
                    }
                },
                schema: {
                   parse : function(response){
                    return response.body;
                   },
                data: function (data) {
                    return data.content;
                 },
                    model: {
                        fields: {
                            id: {type: "string" },
                            bloodSugar: {type: "string"}
                        }
                    }
                },
                pageSize: 0,
                serverPaging: true,
                selectable: true,
                serverSorting: true
            },
            height: 550,
            sortable: true,
            filterable: true,
            pageable: true,
            columns:  [
                {field: "id", title: "id"},
                {field: "bloodSugar", title: "bloodSugar"}
            ]
        });
    });

and it works.

I want to know why data: "body" doesn't work. Is it connect to body keyword or depth?

Thank you.

[Neli]

I am glad to hear that issue has been resolved.

However, I tested locally by using   schema: {  data: "body", ... and the Grid is rendered as expected even if the field that contains the returned data is named "body". Here is a Dojo example where this is demonstrated. 

Let me know in case you have additional question on the matter.

Regards,

Neli