Question

I’m trying to get a hold of the data returned from getJSON, but I just can’t get it to work. I’ve tried the same code with the search.twitter API, and that works fine, but it doesn’t work with the other site. I know that the data is returned cause I can find it when I use the Inspector. The values I find through the Inspector are:

[{"id":62093,"type":"Song","artist":{"id":12382,"type":"Artist","nameWithoutThePrefix":"Tallest Man On Earth","useThePrefix":true,"name":"The Tallest Man On Earth"},"title":"It Will Follow The Rain"},{"id":62094,"type":"Song","artist":{"id":12382,"type":"Artist","nameWithoutThePrefix":"Tallest Man On Earth","useThePrefix":true,"name":"The Tallest Man On Earth"},"title":"Pistol Dreams"},{"id":62095,"type":"Song","artist":{"id":12382,"type":"Artist","nameWithoutThePrefix":"Tallest Man On Earth","useThePrefix":true,"name":"The Tallest Man On Earth"},"title":"Troubles Will Be Gone"},{"id":80523,"type":"Song","artist":{"id":12382,"type":"Artist","nameWithoutThePrefix":"Tallest Man On Earth","useThePrefix":true,"name":"The Tallest Man On Earth"},"title":"Love Is All"},{"id":80524,"type":"Song","artist":{"id":12382,"type":"Artist","nameWithoutThePrefix":"Tallest Man On Earth","useThePrefix":true,"name":"The Tallest Man On Earth"},"title":"I Won't Be Found"},{"id":80525,"type":"Song","artist":{"id":12382,"type":"Artist","nameWithoutThePrefix":"Tallest Man On Earth","useThePrefix":true,"name":"The Tallest Man On Earth"},"title":"Where Do My Bluebird Fly"},{"id":80526,"type":"Song","artist":{"id":12382,"type":"Artist","nameWithoutThePrefix":"Tallest Man On Earth","useThePrefix":true,"name":"The Tallest Man On Earth"},"title":"Sparrow And The Medicine"},{"id":80527,"type":"Song","artist":{"id":12382,"type":"Artist","nameWithoutThePrefix":"Tallest Man On Earth","useThePrefix":true,"name":"The Tallest Man On Earth"},"title":"Into The Stream"},{"id":81068,"type":"Song","artist":{"id":12382,"type":"Artist","nameWithoutThePrefix":"Tallest Man On Earth","useThePrefix":true,"name":"The Tallest Man On Earth"},"title":"The Blizzards Never Seen The Desert Sands"}]

So I know they are returned from the server.

and my js code is:

function searchSongsterrForTab(){
    var artist = "\"The Tallest Man On Earth\""
    var url = "http://www.songsterr.com/a/ra/songs/byartists.json?callback=?&artists=" + artist;

    $.ajax({
        url: url,
        dataType: 'jsonp',
        success: function(data){
            $.each(data, function(i, item){
                console.log(item);
            });
        }
    });
}

I’ve tried all sorts of different code, but I just can’t seem to print the values.

All help are truly appreciated!

Answer 1

You specified dataType as jsonp but the service is just returning json which you cannot use crossdomain.

jQuery’s error message is: "jQuery1710014922410249710083_1323288745545 was not called" which means that the callback is not getting called as it should be.

Update:

There is a way how you can retrieve the data even when the service doesn’t support JSONP format. See this link for details.

My example is using jquery.xdomainajax.js script which is routing the ajax request to YQL which is able to retrieve a whole HTML page in a JSONP format. So the example below is using normal HTML page to retrieve the data.

• Pros:
  • You are able to retrieve any HTML content.
  • It is very flexible as you are not depending what the webservice can get you.
• Cons:
  • It is slower, because you are using Yahoo service to process and fetch whole HTML data.
  • There is also more data transferred.

See THIS snippet for working example.

Code:

var artist = "The Tallest Man On Earth";

$.ajax({
  url: 'http://www.songsterr.com/a/wa/search?pattern=' + escape(artist),
  type: 'GET',
  success: function(res) {
    // see http://www.songsterr.com/a/wa/search?pattern=The%20Tallest%20Man%20On%20Earth
    // 1) res.responseText => get HTML of the page
    // 2) get odd anchors inside (it is zero-indexed) => get anchors containing song names
    // 3) map array of anchor elements into only their text => get song names
    var songs = $(res.responseText).find('div.song a:odd').map(function(i, el) { return $(el).text() });
    console.log(songs);
  }
});

This is just a demonstration. If you need any other data from the page then inspect structure of the page, retrieve it and process and shown in the example above.