Not able to read data from remote server

[Parag]

var dataSource = new kendo.data.DataSource({
        transport: {
          read: {
            url: "http://localhost/apartment/data.php?api=profile",
            dataType: "json",
            type: "GET"
          }
        }

    });

    var viewModel = kendo.observable({
      datasource: dataSource
    });

   var listView = new kendo.View("profile-template", {
    model: viewModel
   });

    var listHtml = listView.render();
    $("#profile-view table").html(listHtml);

  My TEMPLATE: 
  
   <script id="profile-template" type="text/x-kendo-template">
   <tr>
     <td>Name</td><td> <span>#= datasource.name #</span></td>
   </tr>
   <tr>
     <td>Email</td><td>#= name #</td>
   </tr>
   <tr>
     <td>Mobile Number</td><td>9629014027</td>
   </tr>
   <tr>
     <td>Apartment</td><td>Green Age</td>
   </tr>
 </script>

[Ignacio]

There are many ways to do this.
here is a sample that resembles what you want to do
Read from a remote server and bind to a List.

[Parag]

Hi,

 I am getting this error: 
  Uncaught TypeError: Object #<Object> has no method 'slice'

 I am working on mobile app. I followed your instructions and modified according to mobile events like this..

 var dataSource = new kendo.data.DataSource({
       transport: {
           read: {
               url: "http://localhost/apartment/data.php?api=profile",
               dataType: "json"
           }
       }
   });

   $("#profileList").kendoMobileListView({
       dataSource: dataSource,
       template: $("#profile-template").text()
   });

[Parag]

Hi,

   I fixed this issue by changing  the response format . Initially i was getting JSON object  in reponse. Now i changed into JSON ARRAY.  Its working fine.  

 But i would like to know how to append JSON OBJECT into HTML? 

[Ignacio]

So the way this works is that you assign a datasource to your html ListView.
And you assign a template to your ListView.
This template repeats itself for every element on the datasource.
So, to append elements to your html you just need to add those elements to your datasource.
Here is an example

[Parag]

I believe list views works with a response of Collection type, but what if my response is not a collection. For example, I just want to append profile information which comes as a json object, and not a json array. What kind of view should be used in that case?

[Parag]

OK. I finally figured it out. What you need is to specify the schema, and the model, and at least of field in your model

<div id="profile"></div>
    
<script type="text/x-kendo-template" id="template">
    <div>Name : #:name#</div>
    <div>Phone : #:phone#</div>
    <div>Landmark : #:landmark#</div>
    <div>City : #:city#</div>
</script>

<script>
var template = kendo.template($("#template").html());
var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://54.254.164.98:8888/profile",
                        dataType: "jsonp"
                    }
                },
                schema: {
                    model: {
                        fields: {
                            user_id: { type: "string" },
                            name: { type: "string" },
                            phone: { type: "string" },
                            landmark: { type: "string" },
                            city: { type: "string" }
                        }
                    }
                },
                change: function() {
                    $("#profile").html(kendo.render(template, this.view()));
                }
            });

            dataSource.read();

</script>