PDA

View Full Version : JSNOP help



jjkilpatrick
16 Mar 2011, 8:38 AM
Hi all

Having my first go with Sencha and running into a problem.

I just want to make a simple app which uses the lastfm api to show where gigs are happening in a certain city.

Everything seems to be working up to the point of displaying data. Please see my code below:

index.js


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,

onReady: function() {
var tpl = Ext.XTemplate.from('lastfm');

var makeJSONPRequest = function() {
Ext.getBody().mask('Loading...', 'x-mask-loading', false);
Ext.util.JSONP.request({
url: 'http://ws.audioscrobbler.com/2.0/',
params: {
method: 'geo.getevents',
location: 'london',
format: 'json',
api_key: 'eda354c8699d78cb6d5901b7a1f7c7d4',
},
callbackKey: 'callback',

callback: function(data) {
// Output result to console (Firebug/Chrome/Safari)
console.log(data);
// Handle error logic
if (data.error) {
alert(data.error)
return;
}

if (data) {
var html = tpl.applyTemplate(lastfm);
Ext.getCmp('content').update(html);
}
else {
alert('There was an error retrieving the events.');
}
Ext.getCmp('status').setTitle('Lastfm Data');
Ext.getBody().unmask();
}
});
};

new Ext.Panel({
fullscreen: true,
animation: 'slide',
id: 'content',
scroll: 'vertical',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'JSONP',
handler: makeJSONPRequest
}]
},{
id: 'status',
xtype: 'toolbar',
dock: 'bottom',
title: "Tap a button above."
}]
});
}
});


index.html



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AJAX</title>
<link rel="stylesheet" href="sencha-touch.css" type="text/css">
<script type="text/javascript" src="sencha-touch.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<textarea id="lastfm" class="x-hidden-display">
<tpl for=".">
<div class="event">
<div class="title">
{events}
{id}
{tag}
{title}
{website}
</div>
</div>
</tpl>
</textarea>
</body>
</html>


jsnop response



Ext.util.JSONP.callback({"events":{"event":[{"id":"1785514","title":"Chali 2na","artists":{"artist":"Chali 2na","headliner":"Chali 2na"},"venue":{"id":"8778292","name":"Jazz Cafe","location":{"geo:point":{"geo:lat":"51.53858","geo:long":"-0.143331"},"city":"London","country":"United Kingdom","street":"5 Parkway, Camden","postalcode":"NW1 7PG"},"url":"http:\/\/www.last.fm\/venue\/8778292+Jazz+Cafe","website":"http:\/\/www.jazzcafe.co.uk","phonenumber":"+44-(0)20-7485 6834","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/2923151.jpg","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/2923151.jpg","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/2923151.jpg","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/2923151.jpg","size":"extralarge"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/_\/2923151\/Jazz+Cafe+Jazz_Cafe.jpg","size":"mega"}]},"startDate":"Wed, 16 Mar 2011 00:03:01","description":"","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/29783661.jpg","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/29783661.jpg","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/29783661.jpg","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/29783661.jpg","size":"extralarge"}],"attendance":"15","reviews":"0","tag":"lastfm:event=1785514","url":"http:\/\/www.last.fm\/event\/1785514+Chali+2na+at+Jazz+Cafe+on+16+March+2011","website":"","tickets":"\n ","cancelled":"0","tags":{"tag":["jurassic 5","hip-hop","underground hip-hop","rap"]}},{"id":"1770159","title":"Woods","artists":{"artist":["Woods","Spectrals","The Doozer"],"headliner":"Woods"},"venue":{"id":"8778424","name":"Bush Hall","location":{"geo:point":{"geo:lat":"51.506564","geo:long":"-0.231567"},"city":"London","country":"United Kingdom","street":"310 Uxbridge Road","postalcode":"W12 7LJ"},"url":"http:\/\/www.last.fm\/venue\/8778424+Bush+Hall","website":"http:\/\/BushHallMusic.co.UK","phonenumber":"+44 (0)20 8222 6955","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/4603935.jpg","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/4603935.jpg","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/4603935.jpg","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/4603935.jpg","size":"extralarge"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/_\/4603935\/Bush+Hall+london.jpg","size":"mega"}]},"startDate":"Wed, 16 Mar 2011 01:22:01","description":"","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/5644656.jpg","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/5644656.jpg","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/5644656.jpg","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/5644656.jpg","size":"extralarge"}],"attendance":"83","reviews":"0","tag":"lastfm:event=1770159","url":"http:\/\/www.last.fm\/event\/1770159+Woods+at+Bush+Hall+on+16+March+2011","website":"","tickets":"\n ","cancelled":"0","tags":{"tag":["folk","psychedelic","lo-fi"]}},{"id":"1869132","title":"No Borders Fundraiser","artists":{"artist":["?","She Makes War","The Palace of Justice","LA B\u00caTE"],"headliner":"?"},"venue":{"id":"8777896","name":"The Windmill Brixton","location":{"geo:point":{"geo:lat":"51.454519","geo:long":"-0.12249"},"city":"London","country":"United Kingdom","street":"22 Blenheim Gardens, Brixton","postalcode":"SW2 5BZ"},"url":"http:\/\/www.last.fm\/venue\/8777896+The+Windmill+Brixton","website":"http:\/\/www.windmillbrixton.co.uk\/","phonenumber":"020 8671 0700","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/248673.jpg","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/248673.jpg","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/248673.jpg","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/248673.jpg","size":"extralarge"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/_\/248673\/The+Windmill+Brixton.jpg","size":"mega"}]},"startDate":"Wed, 16 Mar 2011 13:27:01","description":"<div class=\"bbcode\">At the WINDMILL BRIXTON, 22 Blenheim Gardens, SW2 5BZ<br \/>\n<br \/>\nFeaturing:<br \/>\n* SHE MAKES WAR - alternative\/grunge\/rock<br \/>\n* THE PALACE OF JUSTICE - gospel\/pop\/surf<br \/>\n* LA B\u00caTE (acoustic set) - experimental\/idol\/rock<br \/>\n<br \/>\nDoors 7.30pm, suggested donation: \u00a33<\/div>","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/26429527.jpg","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/26429527.jpg","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/26429527.jpg","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/26429527.jpg","size":"extralarge"}],"attendance":"1","reviews":"0","tag":"lastfm:event=1869132","url":"http:\/\/www.last.fm\/event\/1869132+No+Borders+Fundraiser","website":"http:\/\/london.noborders.org.uk\/node\/465","tickets":"\n ","cancelled":"0"},{"id":"1810963","title":"Misconduct","artists":{"artist":["Misconduct","Caves","Same Old Story","Myles Pereira"],"headliner":"Misconduct"},"venue":{"id":"8780039","name":"The Fighting Cocks","location":{"geo:point":{"geo:lat":"51.410621","geo:long":"-0.298267"},"city":"Kingston upon Thames","country":"United Kingdom","street":"56 Old London Road","postalcode":"KT2 6QA"},"url":"http:\/\/www.last.fm\/venue\/8780039+The+Fighting+Cocks","website":"http:\/\/www.the-fighting-cocks.co.uk\/","phonenumber":"","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/14432601.jpg","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/14432601.jpg","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/14432601.jpg","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/14432601.jpg","size":"extralarge"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/_\/14432601\/The+Fighting+Cocks+fighting.jpg","size":"mega"}]},"startDate":"Wed, 16 Mar 2011 17:35:01","description":"","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/17760097.jpg","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/17760097.jpg","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/17760097.jpg","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/17760097.jpg","size":"extralarge"}],"attendance":"11","reviews":"0","tag":"lastfm:event=1810963","url":"http:\/\/www.last.fm\/event\/1810963+Misconduct+at+The+Fighting+Cocks+on+16+March+2011","website":"http:\/\/www.facebook.com\/event.php?eid=139947762732507&ref=ts","tickets":"\n ","cancelled":"0","tags":{"tag":["hardcore","punk","hardcore punk","melodic hardcore"]}},{"id":"1859732","title":"Daniel Kieve in the City","artists":{"artist":"Daniel Kieve","headliner":"Daniel Kieve"},"venue":{"id":"9175590","name":"Caffe Concerto St Paul's","location":{"geo:point":{"geo:lat":"51.513867","geo:long":"-0.096482"},"city":"London","country":"United Kingdom","street":"","postalcode":""},"url":"http:\/\/www.last.fm\/venue\/9175590+Caffe+Concerto+St+Paul%27s","website":"","phonenumber":"","image":[{"#text":"","size":"small"},{"#text":"","size":"medium"},{"#text":"","size":"large"},{"#text":"","size":"extralarge"},{"#text":"","size":"mega"}]},"startDate":"Wed, 16 Mar 2011 18:00:00","description":"<div class=\"bbcode\">Daniel Kieve is a multi-talented pianist, instrumentalist, singer, entertainer, singer-songwriter and magician's assistant! From smooth dinner music to full-on sing-a-long entertainment, his repertoire is astoundingly varied, from the familiar to the fantastic.<\/div>","image":[{"#text":"","size":"small"},{"#text":"","size":"medium"},{"#text":"","size":"large"},{"#text":"","size":"extralarge"}],"attendance":"0","reviews":"0","tag":"lastfm:event=1859732","url":"http:\/\/www.last.fm\/event\/1859732+Daniel+Kieve+in+the+City","website":"http:\/\/www.danielkieve.com","tickets":"\n ","cancelled":"0"},{"id":"1745180","title":"Justin Bieber","artists":{"artist":["Justin Bieber","Willow"],"headliner":"Justin Bieber"},"venue":{"id":"8783707","name":"O2 Arena","location":{"geo:point":{"geo:lat":"51.487582","geo:long":"0.006876"},"city":"London","country":"United Kingdom","street":"Peninsula Square","postalcode":"SE10 0DX"},"url":"http:\/\/www.last.fm\/venue\/8783707+O2+Arena","website":"http:\/\/www.theo2.co.uk","phonenumber":"Tickets: 0161 385 3211, Venue: 020 8463 2000","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/58448.jpg","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/58448.jpg","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/58448.jpg","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/58448.jpg","size":"extralarge"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/_\/58448\/O2+Arena.jpg","size":"mega"}]},"startDate":"Wed, 16 Mar 2011 18:30:00","description":"<div class=\"bbcode\"><a href=\"http:\/\/www.last.fm\/music\/Justin+Bieber\" class=\"bbcode_artist\">Justin Bieber<\/a><\/div>","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/58842623.png","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/58842623.png","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/58842623.png","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/58842623.png","size":"extralarge"}],"attendance":"13","reviews":"0","tag":"lastfm:event=1745180","url":"http:\/\/www.last.fm\/event\/1745180+Justin+Bieber+at+O2+Arena+on+16+March+2011","website":"","tickets":"\n ","cancelled":"0","tags":{"tag":["pop","justin bieber","rnb","post-rock","instrumental"]}},{"id":"1804664","title":"Rise Against","artists":{"artist":["Rise Against","Coliseum"],"headliner":"Rise Against"},"venue":{"id":"8779088","name":"Electric Ballroom","location":{"geo:point":{"geo:lat":"51.539745","geo:long":"-0.143038"},"city":"London","country":"United Kingdom","street":"184 Camden High Street","postalcode":"NW1 8QP"},"url":"http:\/\/www.last.fm\/venue\/8779088+Electric+Ballroom","website":"http:\/\/ElectricBallroom.co.uk\/main.html","phonenumber":"","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/10847059.jpg","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/10847059.jpg","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/10847059.jpg","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/10847059.jpg","size":"extralarge"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/500\/10847059\/Electric+Ballroom+IMG_2951.jpg","size":"mega"}]},"startDate":"Wed, 16 Mar 2011 19:00:00","description":"<div class=\"bbcode\">One off show.<\/div>","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/45406029.jpg","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/45406029.jpg","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/45406029.jpg","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/45406029.jpg","size":"extralarge"}],"attendance":"110","reviews":"0","tag":"lastfm:event=1804664","url":"http:\/\/www.last.fm\/event\/1804664+Rise+Against+at+Electric+Ballroom+on+16+March+2011","website":"","tickets":"\n ","cancelled":"0","tags":{"tag":["punk","hardcore","rock","hardcore punk","melodic hardcore","punk rock","crust"]}},{"id":"1791857","title":"Crystal Fighters","artists":{"artist":"Crystal Fighters","headliner":"Crystal Fighters"},"venue":{"id":"8778280","name":"Heaven","location":{"geo:point":{"geo:lat":"51.508087","geo:long":"-0.124122"},"city":"London","country":"United Kingdom","street":"Villiers Street","postalcode":"WC2N 6NG"},"url":"http:\/\/www.last.fm\/venue\/8778280+Heaven","website":"http:\/\/www.Heaven-Live.co.UK","phonenumber":"+44-(0)20-79302020","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/35508739.gif","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/35508739.gif","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/35508739.gif","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/35508739.gif","size":"extralarge"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/500\/35508739\/Heaven+LogoNew.gif","size":"mega"}]},"startDate":"Wed, 16 Mar 2011 19:00:00","description":"","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/35145427.png","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/35145427.png","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/35145427.png","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/35145427.png","size":"extralarge"}],"attendance":"39","reviews":"0","tag":"lastfm:event=1791857","url":"http:\/\/www.last.fm\/event\/1791857+Crystal+Fighters+at+Heaven+on+16+March+2011","website":"","tickets":"\n ","cancelled":"0","tags":{"tag":["dance-punk","indie","electronic","electro"]}},{"id":"1799008","title":"The Red Jumpsuit Apparatus","artists":{"artist":["The Red Jumpsuit Apparatus","Yashin","Lyu"],"headliner":"The Red Jumpsuit Apparatus"},"venue":{"id":"9058247","name":"Relentless Garage","location":{"geo:point":{"geo:lat":"51.546698","geo:long":"-0.103842"},"city":"London","country":"United Kingdom","street":"20-22 Highbury Corner","postalcode":"N5 1RD"},"url":"http:\/\/www.last.fm\/venue\/9058247+Relentless+Garage","website":"http:\/\/www.thegarage.co.uk","phonenumber":"+44-(0)844-8471678","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/39138273.jpg","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/39138273.jpg","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/39138273.jpg","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/39138273.jpg","size":"extralarge"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/_\/39138273\/Relentless+Garage.jpg","size":"mega"}]},"startDate":"Wed, 16 Mar 2011 19:00:00","description":"","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/144711.jpg","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/144711.jpg","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/144711.jpg","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/144711.jpg","size":"extralarge"}],"attendance":"27","reviews":"0","tag":"lastfm:event=1799008","url":"http:\/\/www.last.fm\/event\/1799008+The+Red+Jumpsuit+Apparatus+at+Relentless+Garage+on+16+March+2011","website":"","tickets":"\n ","cancelled":"0","tags":{"tag":["emocore","screamo"]}},{"id":"1870910","title":"The Twilight Singers - Q The Music - Live At Concrete","artists":{"artist":"The Twilight Singers","headliner":"The Twilight Singers"},"venue":{"id":"9116534","name":"Concrete","location":{"geo:point":{"geo:lat":"51.513572","geo:long":"-0.138251"},"city":"London","country":"United Kingdom","street":"56 Shoreditch High St","postalcode":"E1 6JJ"},"url":"http:\/\/www.last.fm\/venue\/9116534+Concrete","website":"","phonenumber":"","image":[{"#text":"","size":"small"},{"#text":"","size":"medium"},{"#text":"","size":"large"},{"#text":"","size":"extralarge"},{"#text":"","size":"mega"}]},"startDate":"Wed, 16 Mar 2011 19:00:00","description":"","image":[{"#text":"http:\/\/userserve-ak.last.fm\/serve\/34\/21040049.jpg","size":"small"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/64\/21040049.jpg","size":"medium"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/126\/21040049.jpg","size":"large"},{"#text":"http:\/\/userserve-ak.last.fm\/serve\/252\/21040049.jpg","size":"extralarge"}],"attendance":"10","reviews":"0","tag":"lastfm:event=1870910","url":"http:\/\/www.last.fm\/event\/1870910+The+Twilight+Singers+-+Q+The+Music+-+Live+At+Concrete","website":"","tickets":"\n ","cancelled":"0","tags":{"tag":["alternative","cover","alternative rock","rock","indie rock"]}}],"@attr":{"location":"London, United Kingdom","page":"1","perPage":"10","totalPages":"191","total":"1905"}}});


When I click the JSNOP button on the toolbar I get lastfm printed to the screen which is not the desired result I wanted. Any help would be greatly apprecaited.

The app is hosted here if anyone would like to look: http://www.johnjameskilpatrick.co.uk/sencha2/

Thanks