json data is unvisible

1 Answer 23 Views
Data Source Grid
sojin
Top achievements
Rank 1
sojin asked on 24 Nov 2021, 03:30 AM

 

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.

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 26 Nov 2021, 09:53 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

sojin
Top achievements
Rank 1
commented on 01 Dec 2021, 06:39 AM | edited

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
Telerik team
commented on 03 Dec 2021, 11:49 AM

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

Tags
Data Source Grid
Asked by
sojin
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or