Support for JSONP

[arlevi]

Hi guys,

I'm trying to use FanArt API with AngularJS.
After the site has loaded, I want to create a background of a music artist that I daily choose.

I was trying to use:

Code: Select all

$scope.init = function() {
        $http.jsonp(fanart_url).success(function(data, status) {
            console.debug(status);
            data.forEach(function(entry) {
                console.log(entry);
            });
        }).error(function(error) {
            console.log("error:", error);
        });
    };

But it gives me a JS error. such as described here: http://stackoverflow.com/questions/2172 ... -statement
So my question is - does FanArt support JSONP in any way ?

[zorensen]

Hi,

our site administrator, Kode, might be the best to answer this.
However, if you have some questions about the API you can find the complete documentation here;

http://docs.fanarttv.apiary.io/

Hopes that helps until Kode give you a straight answer

[arlevi]

Thanks for the answer, I'm already using the API ( though the docs looks much better than I remembered it )
I'll wait for Kode

Just wanted to add to my initial post:
JSONP is actually a concept that isn't really related to just AngularJS ( code example above ).

The thing is that at the end of the URL I'm suppose to have an option to query:

Code: Select all

http://......?callback=some_function

Once the API has completed, the output should look something like this:

Code: Select all

some_function({ ... "i.e": "b" ... some other regular JSON output });

And since "some_function" is actually a function - AngularJS will execute it AS IS ( remember it's a function + JSON data passed as a variable ) and AngularJS just knows how to handle success/errors etc ...

This is required because the whole problem with AJAX requests - is that they AJAX don't work as a cross-site only a local site, so I can't use AJAX to extract the music/artist info *after* the site has loaded...
I can only execute the API using backend code ... and that will require a refresh on my website ... which I want to prevent.

Hope it's clearer...
Thanks again !

[Kode]

To be honest I'm not really sure what I'd need to do to support JSONP, a work around would be to have a script on your local site that grabs the data, and then use AJAX to request that local script.

[arlevi]

The only thing needs to be done is to wrap the JSON output with the requested parameter in URL's query ( as text, nothing else )

Lets say that for a certain query, this is the JSON output from *FanArt*'s site:

Code: Select all

{  "artist": "bla", "background": "http://..." }

And I wrote on my site's JS file ( js/some.js ) the following:

Code: Select all

function my_fanart(json_output) {
 .... doing something with json_output from FanArt's site ....
}

function artist_background(json_output) {
 .... doing something with json_output from FanArt's site ....
}

Example 1

Code: Select all

# I requested http://api.fanart.com?some_functions&params......&callback=my_fanart
# output should be:
my_fanart({  "artist": "bla", "background": "http://..." })

This will execute my website's JS function "my_fanart"

Example 2

Code: Select all

# I requested http://api.fanart.com?some_functions&params......&callback=artist_background
# output should be:
artist_background({  "artist": "bla", "background": "http://..." })

This will execute my website's JS function "artist_background"

Example 3

Code: Select all

# I requested http://...... ( w/o any callback parameter )
# output should be as today:
{  "artist": "bla", "background": "http://..." }

Will not execute anything - and this is how it's currently working

"callback" is just a URL query parameter with a value "my_fanart" or "artist_backgroun", so on the backend - you take the "callback"'s param value, and output it in the format of:

Code: Select all

callback_value(and your JSON output)

Hope it's clearer,
Ricky.