Search code examples
jsonangularjsjsonpetsy

Errors with Angular $http GET and jsonp

Having a lot of difficulty connecting to Etsy API with both http an jsonp.

URL works fine in the browser: https://openapi.etsy.com/v2/shops/GreatLakesModern/listings/active?api_key=5a61qc30hrvrqcperugollh5&fields=title&callback=JSON_CALLBACK

But gives 404 error with jsonp and 0 status error with $http.get

I don't believe it's an issue of CORS, because when I test other APIs on CodePen, they work. Substitute the Etsy URL and no luck.

Did some more research and found that Etsy is not CORS-compatible. With that knowledge, how should I proceed?

Example: http://codepen.io/SitePoint/pen/YXXQxj?editors=101

I've tried an assortment of solutions, but here is my current code:

var url = "https://openapi.etsy.com/v2/shops/GreatLakesModern/listings/active?api_key=5a61qc30hrvrqcperugollh5&fields=title&callback=JSON_CALLBACK";

$http.jsonp(url)               
            .success(function (data) {$scope.details = "Success";})
            .error(function (data, status) {$scope.details = "Nope"+""+status;});
Solution

  • I just looked at the link you posted and it does seem that Etsy supports jsonp. But you have to change how you call their api.

    Instead of https://..../active?api_key=...

    You need to do https://..../active.js?api_key=...&callback=etsyResult123

    Notice the addition of the .js part.

    More precisely, with Angular's $http.jsonp api it would be 

    var url = "https://openapi.etsy.com/v2/shops/GreatLakesModern/listings/active.js?api_key=5a61qc30hrvrqcperugollh5&fields=title&callback=JSON_CALLBACK";

    Here is a working plnkr: http://plnkr.co/edit/ulaMTo?p=preview