Interpreting JSON to Kendo UI Mobile Listview

Question

I am attempting to convert my JSON data to a Kendo UI Mobile Listview. my php script outputs this data:

[{"eventID":"1","name":"test","time":"12:00:00","category":"####","subcategory":"####","description":"Event for testing purposes","locationID":"1","picturePath":"http:\/\/####\/~z3370257\/images\/1.jpg"},{"eventID":"2","name":"test2","time":"13:00:00","category":"####","subcategory":"SEIT","description":"Event for testing purposes2","locationID":"1","picturePath":"http:\/\/####\/~z3370257\/images\/1.jpg"}]

This JS fiddle uses the same html css and javascript file that my app does.

My question is, what do I need to put in my transport & read methods to get it to interpret the data correctly.

Answer 1

Your Kendo code is fine. There can only be 2 issues:

1. Data that is returned by the service is not proper JSON. It should be encoded like this:

                   [{ 
                   "category": "123",
                   "description": "Event for testing purposes",
                   "eventID": "1",
                   "locationID": "1",
                   "name": "Kendo",
                   "picturePath": "https://si0.twimg.com/profile_images/1514396238/KendoUI-Figure.png",
                   "subcategory": "SEIT",
                   "time": "12:00:00"
               } ,
   
               {
                   "category": "123",
                   "description": "Event for testing purposes",
                   "eventID": "1",
                   "locationID": "1",
                   "name": "jQuery",
                   "picturePath": "http://dochub.io/images/jquery_logo.png",
                   "subcategory": "SEIT",
                   "time": "12:00:00"
               }]
   

2. your DataSource is initialized insde the function "dataInit" which is not shown anywhere in the code. And the listview is initialized in the data-init event of the view. So I assume the list is initialized before datasource and causing data not to be bound. Fix for this is you can keep your DataSource outside of the dataInit function as shown in this fiddle which works using your code the way you want: http://jsfiddle.net/whizkid747/MPzVu/

   var app = new kendo.mobile.Application(document.body);        
   var dataSource = new kendo.data.DataSource({
   
       transport: {
           read: {
               //using jsfiddle echo service to simulate JSON endpoint
               url: "/echo/json/",
               dataType: "json",
               type: "POST",
               data: {
                   // /echo/json/ echoes the JSON which you pass as an argument
                   json: JSON.stringify([
                       {
                           "category": "123",
                           "description": "Event for testing purposes",
                           "eventID": "1",
                           "locationID": "1",
                           "name": "Kendo",
                           "picturePath": "https://si0.twimg.com/profile_images/1514396238/KendoUI-Figure.png",
                           "subcategory": "SEIT",
                           "time": "12:00:00"
                       } ,
                       {
                           "category": "123",
                           "description": "Event for testing purposes",
                           "eventID": "1",
                           "locationID": "1",
                           "name": "jQuery",
                           "picturePath": "http://dochub.io/images/jquery_logo.png",
                           "subcategory": "SEIT",
                           "time": "12:00:00"
                       }
                   ])
               }
           }
       }
   });
   
   function loadEventNames(){           
     $("#eventfeed").kendoMobileListView({
     dataSource: dataSource,
     template: $("#eventNameTemplate").html(),
     style:'inset'
    });
   }