JSON - ASP.NET Web Service Connection using Twitter Example

[Christopher Tallos]

Here's my code,

<div id="example" class="k-content">

        <div id="tweets-container" class="k-header k-menu-vertical">

            <h3>

                Twitter feed</h3>

            <div id="search-box">

                <label>

                    Search for:

                    <input type="text" value="html5" id="searchfor" class="k-textbox" />

                </label>

                <button class="k-button" id="search">

                    search</button>

            </div>

            <div id="tweets">

                <div>

                    Loading ...

                </div>

            </div>

        </div>

        <script id="template" type="text/x-kendo-template">

                <div class="tweet k-header">

                    <img width="48" height="48" src="#= profile_image_url #" alt="#= from_user #" />

                    #= FirstVal #

                </div>

        </script>

        <script>

            $(document).ready(function () {

                // create a template using the above definition

                var template = kendo.template($("#template").html());

 

                var Product = kendo.data.Model.define({

                    id: "FirstID",

                    fields: {

                            "FirstVal": {

                            type: "string"

                            },

                            "SecondVal": {

                                type: "string"

                            }

                    }

                });

 

                var dataSource = new kendo.data.DataSource({

                    transport: {

                        read: {

                            url: "/ws/getservice.asmx/GetAllTestimonials", // the remove service url

                            data: "{}",

                            contentType: "application/json; charset=utf-8",

                            dataType: "json", // JSONP (JSON with padding) is required for cross-domain AJAX

                            complete: function(data,xhr){

                                result = JSON.parse(data.d.resposeText);

                            }

                        }

                    },

                    change: function () { // subscribe to the CHANGE event of the data source

                        $("#tweets").html(kendo.render(template, dataSource.view()));

                    }

                });

 

                // read data from the remote service

                dataSource.read();

 

                $("#search").click(function () {

                    dataSource.read();

                });

 

                $("#searchfor").keydown(function (e) {

                    if (e.keyCode === kendo.keys.ENTER) {

                        dataSource.read();

                    }

                });

            });

        </script>

Here's my JSON

[{"FirstID":1,"FirstVal":"Test","SecondVal":"TestOne"},{"FirstID":2,"FirstVal":"Test","SecondVal":"TestTwo"}]

I'm not sure what I am doing wrong here, any help would be appreciated.

[Atanas Korchev]

Hello Christopher,

 We are not really sure what you are asking. You have pasted your code but haven't described what the actual problem is. Please clarify.

Regards,
Atanas Korchev
the Telerik team

[Christopher Tallos]

Hi Atanas,

My apologies for not being clear on what the issue was.  It turns out that the ASP.NET web service was returning a literal string that was not understood as a JSON array. The solution was to add the jQuery.parseJSON method to the schema data event as shown here

schema: {

     data: function (data) {

          return jQuery.parseJSON(data.d);

     }

},

I guess the only left for me to ask would be is there a better (or more recommended) approach to parsing the data returned by the web service?  Here is my code for anybody experiencing the same issue.  I was using the twitter example provided by Kendo to get to this point.

<script>

            $(document).ready(function () {

                // load testimonials

                var template = kendo.template($("#testimonialtemplate").html());

                var dataSource = new kendo.data.DataSource({

                    transport: {

                        read: {

                            url: "/ws/getservice.asmx/GetAllTestimonials", // the remove service url

                            data: "{}",

                            contentType: "application/json; charset=utf-8",

                            dataType: "json"

                        }

                    },

                    schema: {

                        data: function (data) {

                            return jQuery.parseJSON(data.d);

                        }

                    },

                    change: function () {

                        $("#testimonialcontent").html(kendo.render(template, this.view()));

                    }

                }).read();

            });

        </script>

[Atanas Korchev]

Hello Christopher,

 There is some additional configuration required for a web service to return proper JSON. There is a very good blog post which explains everything.

 You can also check this project which shows how to consume ASP.NET web services with kendo.

All the best,
Atanas Korchev
the Telerik team