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.

are you sure you are getting json ? the data that you posted is not JSON. — Nishanth Nair, Apr 24 '13 at 02:58
Yes, I am 99.99999% certain I am, that is the debugger interpreting the data I am fetching. the php script echos json encoded data. — Mike Betterton, Apr 24 '13 at 04:21
Are you sure that the data you become is an array? And could you try to make a jsFiddle with your data? (It can be fix coded, that shouldn't matter!) — Shion, Apr 24 '13 at 10:31
Pls post the data exactly as you capture it from fiddler or ur browser dev tools. We need to make the .000001% also sure ;) — Nishanth Nair, Apr 24 '13 at 11:49
I have fixed my php and updated the question to reflect the new information, does anyone have any ideas / help? — Mike Betterton, Apr 25 '13 at 02:30

Nishanth Nair · Accepted Answer · 2013-04-24T18:40:40.683

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

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"
            }]

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'
 });
}

The response im getting from the server is: {"eventID":"1","name":"test","time":"12:00:00","category":"####","subcategory":"SEIT","description":"Event for testing purposes","locationID":"1","picturePath":"http:\/\/####\/~####\/images\/1.jpg"} My IDE (Icenium) just put it in a table for me. Also dataInit was running in the onDeviceReady() function, ive tried just having it off by itself and it still dosent work. — Mike Betterton, Apr 24 '13 at 21:52
did this fiddle help you? http://jsfiddle.net/whizkid747/MPzVu/ . how is your solution different from the fiddle? — Nishanth Nair, Apr 24 '13 at 22:04
Yeah I've tried to copy it precisely, even using the actual fiddle the second I put in my php url instead of the echo thingy it gets the forever loading problem. My php script looks like this. http://jsfiddle.net/F5BFY/ (It wouldn't fit inside a comment box) — Mike Betterton, Apr 24 '13 at 22:12

Interpreting JSON to Kendo UI Mobile Listview

1 Answers1