Angular $http jsonp: how to parse through data

Question

I'm starting to learn Angular and I want to play around with the $http call function. I basically want to make a get request to an external API:

angular.module('pokedexApp')
  .controller('MainCtrl', function ($scope, $http) {
    var response;
    $http.jsonp("http://pokeapi.co/api/v1/pokemon/1/").success(function(response) {
        response = response;
    })

    $scope.pokemon = response;
  });

I'm probably completely wrong as to how this works. I basically want to {{ pokemon }} out a response to test it.

I'm getting a Uncaught SyntaxError: Unexpected token : error and I can't tell if it's because the return data isn't properly formatted or what.

Community · Accepted Answer · 2017-05-23 10:26:26Z

1

The error is because in angular it will try to parse this response in json type. And it failed to parse, so it throw an error:

Uncaught SyntaxError: Unexpected token :

Seems in angularjs you'd better to handler jsonp response by your self.

  $scope.triggerJsonp = function(){
      $http.jsonp("http://pokeapi.co/api/v1/pokemon/1/", {params: {'callback':'eqfeed_callback'}});  
  };
  window.eqfeed_callback  = function(data){
      $scope.response = data;
  }

Here is jsfiddle.

Relative issue in jquery.ajax JSONP call showing "Uncaught SyntaxError: Unexpected token : " And answer use own callback to handle this.

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Nov 12, 2014 at 2:52

Tyler.z.yang

2,4601 gold badge20 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dennis Shy Over a year ago

Interesting. Thanks for showing the relative issue too. Clears things up.

nairys · Accepted Answer · 2014-11-12 02:50:16Z

0

It doesn't look like the website provides JSONP support - https://github.com/phalt/pokeapi_issues/issues/30

Your $http request is fine but you currently have a scoping issue with respect to 'response'. This is how your code should be written in order for your scope variable to be defined correctly:

angular.module('pokedexApp')
   .controller('MainCtrl', function ($scope, $http) {
        $http.jsonp("http://pokeapi.co/api/v1/pokemon/1/").success(function(response) {
            $scope.pokemon = response;
        })    
   });

edited Nov 12, 2014 at 2:50

answered Nov 12, 2014 at 2:12

nairys

3433 silver badges9 bronze badges

4 Comments

Tyler.z.yang Over a year ago

I think you are wrong. I just try $http.jsonp("pokeapi.co/api/v1/pokemon/1/") in chrome. And get a success response data from it.

nairys Over a year ago

I think the success response can be tricky/misleading. Are you able to actually get data from it?

nairys Over a year ago

Nice catch on the callback!

Tyler.z.yang Over a year ago

Thx. Here is another relative issue in jquery. JSONP call showing “Uncaught SyntaxError: Unexpected token : ”

Collectives™ on Stack Overflow

Angular $http jsonp: how to parse through data

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related