Databases
StackOverflow2013
Postsdbo
POKendo UI/Mobile - Get JSONP and append to listview
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKendo UI/Mobile - Get JSONP and append to listview
    text
    copied!<p>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:</p> <pre><code>Error [object Object] </code></pre> <p>Heres my code: ** Updated **</p> <pre><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=hx59ay', dataType: "jsonp" } }, schema: { data: "listing" //??? Not sure what this should be??? }, error: function(e) { console.log("Error " + e); }, change: function() { $("#propertyResultListView").html(kendo.render(template, this.view())); console.log(this.view()); } }); dataSource.read(); $("#propertyResultListView").kendoMobileListView({dataSource:dataSource,template: $("#propertiesListViewTemplate").html()}); } function onResult(resultData) { console.log("Results " + listing); $("#propertyResultListView").kendoMobileListView({dataSource: kendo.data.DataSource.create({data:resultData}), template: $("#propertiesListViewTemplate").html()}); } </code></pre> <p>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).</p> <p>The JSON thats returned is:</p> <pre><code>{"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 &amp; 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"} </code></pre> <p>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</p> <pre><code> $.getJSON(serviceURL + 'getproperties.php?postcode=' + postcode + '&amp;minimum_beds=' + minimumBeds + '&amp;minimum_price=' + minimumPrice + '&amp;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('&lt;li&gt;&lt;a href="propertydetails.html?id=' + property.listing_id + '"&gt;' + '&lt;img src="' + property.thumbnail_url + '"/&gt;' + '&lt;h6&gt;' + property.property_type + '&lt;/h6&gt;' + '&lt;p&gt;' + property.displayable_address + '&lt;/p&gt;' + '&lt;p&gt;&lt;strong&gt;&amp;pound;' + property.price + '&lt;/strong&gt;&lt;/p&gt;'); $('#propertyList').listview('refresh'); }); }); </code></pre> <p>Template</p> <pre><code>&lt;!-- Template for Property results, need to change below fields --&gt; &lt;script type="text/x-kendo-template" id="propertiesListViewTemplate"&gt; &lt;h4&gt;${property_type}&lt;/h4&gt; &lt;p&gt;${street_name}&lt;/p&gt; &lt;/script&gt; </code></pre> <p><strong>* Update - Code updated for Pechka answer **</strong></p> <p>I have now changed my service to return jsonp (with a callback) as per the link you mentioned. I can now see the jsonp in developer tool network tab - </p> <p>jQuery17106739131917711347_1354193012656({"country":"England","result_count":179,"longitude":-1.83261282209016,"area_name":"Elland","listing":[{"image_caption":"","rental_prices":{"per_week":75,"accurate":"per_month","per_month":"325"},"status":"to_rent","num_floors":"0","listing_status":"rent","num_bedrooms":"1","agent_name":"Boococks","latitude":53.68668 ...</p> <p>Nothing is getting populated into my template though, so no list view is created (I realize this is probably down to my newness to kendo). Can you see where I'm going wrong, this seems incredably tricky compared to JQM... Thanks again for your help.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload