json data extraction in pebbleJS

Question

I am stuck in json data extraction in pebble.

var UI = require('ui');
var ajax = require('ajax');

var URL="http://ws.audioscrobbler.com/2.0/?method=user.getTopArtists&user=test&api_key=4a9f5581a9cdf20a699f540ac52a95c9&limit=10&format=json&callback=?";
var card = new UI.Card({
  title:'last.fm stat',
  subtitle:'Fetching...'
});
card.show();

ajax({ url: URL }, function(data){
  var topArtist=data.topartists[0].artist.name;
  card.subtitle(topArtist);
});

Here's the error I get:

[INFO] ocess_manager.c:368: Heap Usage for App <lastfm sta: Total Size <48584B> Used <6256B> Still allocated <28B>
[PHONE] pebble-app.js:?: (+) [card 1] : [card 1]

[PHONE] pebble-app.js:?: JavaScript Error:
TypeError: Cannot read property '0' of undefined
    at pebble-js-app.js:123:32
    at pebble-js-app.js:871:17
    at req.onreadystatechange (lib/ajax.js:11

4:9)

Answer 1

Evening Mona,

1. Remove the question mark at the URL's end.

2. Remove the card.show() instruction where you put it, and place it after adding a subtitle to it.

3. Specify you're dealing with a JSON datatype.

And your final code should now look like this:

var UI = require('ui');
var ajax = require('ajax');

var URL="http://ws.audioscrobbler.com/2.0/?method=user.getTopArtists&user=test&api_key=4a9f5581a9cdf20a699f540ac52a95c9&limit=10&format=json&callback=";
var card = new UI.Card({
    title:'last.fm stat',
    subtitle:'Fetching...'
});

ajax({ url: URL, type: 'json' }, function(data) {
    var topArtist = data.topartists.artist[0].name;
    card.subtitle(topArtist);
    card.show();
});

It should now run perfectly. :)

Also, you should add a failure callback in your ajax method:

ajax({object}, success, failure)