Sencha Touch Mobile App - JSON Request Generates Syntax Error

Question

I started playing a little with Sencha Touch.

So, I built a really simple application based on one example to see how this happens.

It basically creates a JSON request that runs the Last.FM web service to receive music events near the user's location.

Here's the JSON code:

var makeJSONPRequest = function() { Ext.util.JSONP.request({ url: 'http://ws.audioscrobbler.com/2.0/', params: { method: 'geo.getEvents', location: 'São+Paulo+-+SP', format: 'json', callback: 'callback', api_key: 'b25b959554ed76058ac220b7b2e0a026' }, callback: function(result) { var events = result.data.events; if (events) { var html = tpl.applyTemplate(events); Ext.getCmp('content').update(html); } else { alert('There was an error retrieving the events.'); } Ext.getCmp('status').setTitle('Events in Sao Paulo, SP'); } }) }; 

But every time I try to run it, I get the following exception:

Uncaught SyntaxError: Unexpected token:

Who has a key?

Answer 1

A few things. First of all, "Uncaught SyntaxError: Unexpected token :" means that the JavaScript javascript engine complains about the colon ":" , which was put in the wrong place.

The problem will most likely be in the returned JSON. Since everything returned by the server will be executed using the eval("{JSON HTTP RESULT}") function in javascript, it is most likely that your problem is somewhere there.

I put your code on a small sencha test harness and found a couple of problems with it.

First: My browser was not happy with "squiggly ã" in location: 'São+Paulo+-+SP', , so I had to change it to location: 'Sao+Paulo,+Brazil', , which worked and returned the correct results from the audioscribbler API.

Second:. I noticed that you added the callback: 'callback', to your request parameters, which changes the nature of the HTTP result and returns JSON as follows:

 callback({ // a function call "callback(" gets added here "events":{ "event":[ { "id":"1713341", "title":"Skank", "artists":{ "artist":"Skank", "headliner":"Skank" }, // blah blah more stuff "@attr":{ "location":"Sao Paulo, Brazil", "page":"1", "totalpages":"1", "total":"2" } } }) // the object gets wrapped with extra parenthesis here 

Instead, I think you should use callbackKey: 'callback' , which comes with an example at http://dev.sencha.com/deploy/touch/examples/ajax/index.js .

Something like this, for example:

  Ext.util.JSONP.request({ url: 'http://ws.audioscrobbler.com/2.0/', params: { method: 'geo.getEvents', location: 'Sao+Paulo,+Brazil', format: 'json', api_key: 'b25b959554ed76058ac220b7b2e0a026' }, callbackKey: 'callback', callback: function(result) { // Output result to console (Firebug/Chrome/Safari) console.log(result); // Handle error logic if (result.error) { alert(result.error) return; } // Continue your code var events = result.data.events; // ... } }); 

It worked for me like that, hope it works for you too. Cherio.