Kendo UI/Mobile - Get JSONP and append to listview

[James]

I'm just starting out with Kendo mobile (impressed so far - coming from JQM). I'm trying to pass a postcode to a url which returns some json (houses near that area) and then append it to a listview using Datasource. However, it fails an in console I just get:

Error [object Object] 

Heres my code:

var app = new kendo.mobile.Application(document.body, 
{
    transition:'slide'
});

function onBodyLoad() {
    //document.addEventListener("deviceready", onDeviceReady, false);
    // Use the following for testing in the browser
    getProperties(onResult);
}

function getProperties(callback) {

    var template = kendo.template($("#propertiesListViewTemplate").html());
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: 'http://www.someurl.me/getproperties.php?postcode=bd11db',
                dataType: "jsonp"
            }
        },

        schema: {
            //data: "ResultSet.Result"
            data: function(response) {
                return response.listing;
            }
        },


        error: function(e) {
            console.log("Error " + e);
        },
        change: function() {
            $("#propertyResultListView").html(kendo.render(template, this.view()));
        }
    });
    dataSource.read();
    $("#propertyResultListView").kendoMobileListView({dataSource:dataSource,template: $("#propertiesListViewTemplate").html()});

}

function onResult(resultData) {
    console.log("Results " + resultData);
    $("#propertyResultListView").kendoMobileListView({dataSource: kendo.data.DataSource.create({data:resultData}),
        template: $("#propertiesListViewTemplate").html()});
}

I'm sure this is down to the schema part of the Datasource but I'm lost as to what it should be (the docs havent really helped).

The JSON thats returned is:

{"country":"England","result_count":510,"longitude":-1.826866,"area_name":"Caldercroft, Elland HX5","listing":[{"image_caption":"Main Image","status":"for_sale","num_floors":"0","listing_status":"sale","num_bedrooms":"2","agent_name":"Daniel & Hirst","latitude":53.688934,"agent_address":"110 Commercial Street","num_recepts":"0","property_type":"Detached","country":"England","longitude":-1.843375,"first_published_date":"2012-10-11 19:05:42","displayable_address":"Elland HX5","street_name":"EXLEY LANE","num_bathrooms":"0","thumbnail_url":"http://images.zoopla.co.uk/f7f6791d95dadef11b340be2949bd8957079168f_80_60.jpg","description":"Comments","post_town":"Elland","details_url":"http://www.zoopla.co.uk/for-sale/details/26491359","agent_logo":"http://static.zoopla.co.uk/zoopla_static_agent_logo_(120721).png","price_change":[{"date":"2012-10-11 16:45:02","price":"37500"}],"short_description":"We are pleased to offer ...","agent_phone":"01484 954009","outcode":"HX5","image_url":"http://images.zoopla.co.uk/f7f6791d95dadef11b340be2949bd8957079168f_354_255.jpg","last_published_date":"2012-11-21 17:31:46","county":"West Yorkshire","price":"37500","listing_id":"26491359"}

Could someone point me in the right direction? The whole datasource schema is confusing to me. If it helps to describe what I'm trying to do in JQM I'd do something like

$.getJSON(serviceURL + 'getproperties.php?postcode=' + postcode + '&minimum_beds=' + minimumBeds + '&minimum_price=' + minimumPrice + '&maximum_price=' + maximumPrice , function(data) {

    $('#propertyList li').remove();

    // Loop through json data and append to table
    listings = data.listing;
    $.each(listings, function(index, property) {

        console.log(property.image_url);
        console.log(property.price);

        $('#propertyList').append('<li><a href="propertydetails.html?id=' + property.listing_id + '">' +
                '<img src="' + property.thumbnail_url + '"/>' +
                '<h6>' + property.property_type + '</h6>' +
                '<p>' + property.displayable_address + '</p>' +
                '<p><strong>&pound;' + property.price + '</strong></p>');

        $('#propertyList').listview('refresh');
    });

});

Thanks in advance!

[Daniel]

Hello James,

The schema looks correct for the response you are receiving. Since from your description it seems that the dataSource error event is triggered, the most likely reason for the problem is that the request does not have a callback and you have specified that JSONP should be used. If the URL is local then you should change the dataType to "json". If it is not, then you should enable your server for JSONP.

Regards,
Daniel
the Telerik team

[James]

Hi Daniel

I've now changed my web service code so the request now has a callback, however the listview is not being created and no errors are being shown in console. HOWEVER, I can see the responce in the network tab of chrome dev tools with all the json in there. So I guess I'm doing something wrong with kendo to get the data displayed on screen. If I console.log(this.view()); in my datasource change method I get this in my console (which must mean im nearly there!)

[o.extend.init, o.extend.init, o.extend.init, o.extend.init, o.extend.init, o.extend.init, o.extend.init, o.extend.init, o.extend.init, o.extend.init, _events: Object]

1. 0: o.extend.init
2. 1: o.extend.init
3. 2: o.extend.init
4. 3: o.extend.init
5. 4: o.extend.init
6. 5: o.extend.init
7. 6: o.extend.init
8. 7: o.extend.init
9. 8: o.extend.init
10. 9: o.extend.init
11. _events: Object
12. length: 10
13. parent: function (){return b._parent()}
14. type: function (a){var b=this,c,d,e=function(){return b},f;o.fn.init.call(this);for(d in a)c=a[d],d.charAt(0)!="_"&&(f=M.call(c),c=b.wrap(c,d,e)),b[d]=c;b.uid=n.guid()}
15. __proto__: b

I can expand the 0,1,2,3 etc to reveal my results from the web service but how can I get these into my template/listview. Really appreciate your help as I'm very new to Kendo but really want to adopt it as my framework of choice. Please help :) Thanks.

[Daniel]

Hi James,

I am not sure what is causing the problem with displaying the data. Could you share the "propertiesListViewTemplate" template so I can check the exact setup?

Regards,
Daniel
the Telerik team