Angularjs api call with id

Question

So I'm getting into Angular and I've made a succesfull api call which returns objects with a name and a url. To get details of an object I need to do another api call which has the id of the object in it. I'm not sure how to do this.

This is my service to make the api call for the details of the object. the ':id' is where the id of the object has to go in the api link

app.factory('pokemonDetails', ['$http', function($http) {
return $http.get('http://pokeapi.co/api/v2/pokemon/:id')
    .success(function(data) {
        return data;
    })
    .error(function(err) {
        return err;
    });
}]);

I'm not sure if I'm explaining this clearly.

When I go to my url '/pokemon/1', the api has to call 'http://pokeapi.co/api/v2/pokemon/1'.

If I go to my url '/pokemon/2', the api has to call 'http://pokeapi.co/api/v2/pokemon/2' and so on..

(I'm not sure if I need to share other parts of my code, if I do tell me and I'll add them.)

try this stackoverflow.com/questions/19365714/…

gihan-maduranga
– gihan-maduranga

2016-02-21 14:57:17 +00:00
Commented Feb 21, 2016 at 14:57 — gihan-maduranga
– gihan-maduranga, Commented Feb 21, 2016 at 14:57

Bennett Adams · Accepted Answer · 2016-02-21 14:46:54Z

1

This is a good use case for angular's $resource service, if you'd like to use it.

var Pokemon = $resource('http://pokeapi.co/api/v2/pokemon/:id', {id:'@id'});
var thisPokemon = Pokemon.get({id:1}, function() {
  /* whatever you want to do after you get the details back */
});

$resource is kind of a shorthand that allows you to make standard (and custom) CRUD operation calls on your API resources.

answered Feb 21, 2016 at 14:46

Bennett Adams

1,81815 silver badges17 bronze badges

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

Comments

georgeawg · Accepted Answer · 2016-02-21 15:03:58Z

0

Define a function that has a parameter.

app.factory('pokemonDetails', ['$http', function($http) {
     function httpPromise(id) {
         return $http.get('http://pokeapi.co/api/v2/pokemon/'+id);
     }
     //return function
     return httpPromise
}]);

Then use it in your client code.

$scope.details=[];
for (var id=0; id < someNumber; id++) {
    pokemanDetails(id).then( function onFulfilled(response) {
        $scope.details[id] = response.data;
    }).catch ( function onRejected (response) {
        console.log ( response.status );
    });
};

The key is passing parameters to a function.

Deprecation Notice

The $http legacy promise methods .success and .error have been deprecated. Use the standard .then method instead.¹

edited Feb 21, 2016 at 15:03

answered Feb 21, 2016 at 14:58

georgeawg

49k13 gold badges78 silver badges98 bronze badges

1 Comment

Mosh Over a year ago

Does the second part go in the controller? or do I have to add some other code somewhere? (Sorry, I'm a real noob when it comes to Angular) :/

Collectives™ on Stack Overflow

Angularjs api call with id

2 Answers 2

Comments

Deprecation Notice

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Deprecation Notice

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related