This is a migrated thread and some comments may be shown as answers.

JSON - ASP.NET Web Service Connection using Twitter Example

3 Answers 87 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Christopher Tallos
Top achievements
Rank 1
Christopher Tallos asked on 30 Nov 2012, 04:05 PM
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.

3 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 03 Dec 2012, 07:50 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Christopher Tallos
Top achievements
Rank 1
answered on 03 Dec 2012, 08:00 PM
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>
0
Atanas Korchev
Telerik team
answered on 04 Dec 2012, 09:13 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Data Source
Asked by
Christopher Tallos
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Christopher Tallos
Top achievements
Rank 1
Share this question
or