Angular JSONP request

Question

I'm trying to get a jsonp response from an api call api.brewerydb.com. However, it's not wrapping the json with a function on its call back. Here is my code:

app.factory('beer', ['$http',function($http){
  var url = "http://api.brewerydb.com/v2/beers?key=MYKEY&application/json&name=oberon&callback=JSON_CALLBACK";

  $http.jsonp(url)
    .success(function(data){
      return data;
    });
}]);

It is returning json data, however I get a syntax error at a file whose name is the url I passed and it contains the json data.

I discovered that the api does not support jsonp which is why this isn't working out for me

What do you mean by "I get a syntax error at a file whose name is the url I passed"? — Bidhan, May 20 '15 at 01:03
hey i looked at BreweryDB's api docs and posted a possible solution below. give it a shot -- GL! — Shehryar Abbasi, May 20 '15 at 01:28

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

Your url may be incorrect: '../application/json..' is for an optional HTTP_ACCEPT header per their api docs here: breweryDB , so remove it from the var url string if its not needed.
Per their docs, the default return type is JSON, so no need to pass an extra parameter if its not needed.
Try this instead (for the endpoint /Beers) per their endpoint doc :

var url = "http://api.brewerydb.com/v2/beers?key=MYKEY&name=oberon&callback=JSON_CALLBACK";

Go get them beers!
EDIT: code is here: http://jsfiddle.net/r47y3mq3/1/ copy/paste to your local dev environment and use Safari.

Using Chrome results in an Access-Control-Allow-Origin header concern as discussed here: access-control

edited May 23 '17 at 11:52

Community

1
1

answered May 20 '15 at 01:27

Shehryar Abbasi

378
2
8

I tried this and it didn't seem to change anything. Something I did notice though other apis wrap the json response in a method called JSON_CALLBACK. like this one. https://gdata.youtube.com/feeds/api/users/orbitalofficial/uploads?alt=json-in-script&callback=JSON_CALLBACK The beer api though does not do this. Could this be an issue with their api not accepting callback as a parameter? – user2015858 May 20 '15 at 04:25
it works in `Safari` using either $http.get(url) or $http.jsonp(urlWithCallback) ..i'll copy/paste the code i tried on my local dev environment....so Chrome (and jsfiddle.net) has some access control issues as documented here: [access-control-allow-origin-header](http://stackoverflow.com/questions/21102690/angularjs-not-detecting-access-control-allow-origin-header) – Shehryar Abbasi May 20 '15 at 05:43
added link to jsfiddle in my answer .. GL! – Shehryar Abbasi May 20 '15 at 06:19

score 0 · Answer 2 · edited Nov 26 '16 at 03:29

0

I was having some similar issues. You have name=oberon which is a brewery, but you are searching for beers in your url.

If you tried:

var url = "http://api.brewerydb.com/v2/breweries?key=MYKEY&application/json&name=oberon&callback=JSON_CALLBACK";

...you'd get an array of all the beers in the Oberon brewery.

edited Nov 26 '16 at 03:29

jrbedard

3,662
5
30
34

answered Nov 26 '16 at 03:10

Michael Wolf Hoffman

379
1
2
10

Angular JSONP request

2 Answers2