How to call external rest service from angularjs?

Question

I am trying to call an external REST service from angular using $http service.
The thing is that I am stuck on the $http.get method, because everytime I call
the rest service i get an error with status = 0 and no information in the data parameter
of the error callback.

So far I've tried calling a local service runnig on port 5000 : $http.get('http://localhost:5000/ping') and this is supposed to return a json object with a property and a value. Another approach was calling http://api.flickr.com/services/rest/?method=flickr.test.echo&name=test in the hope of getting an answer. For both of them I get the same error: that I mentioned earlier.

The call is made from an angular controller that has injected the http service.

Thanks.

To handle the response from and $http request: $http.get(url, {}).then(function(result) { console.log('success', result.data);}, function(result) { console.log('error'); }); — jpmorin, Apr 18 '13 at 05:30
Show us the code. How do you know that you get an error with status = 0 and no information in the data parameter of the error callback. Even though this fails : http://api.flickr.com/services/rest/?method=flickr.test.echo&name=test as I have not provided an API key the status is 200 OK on my machine. — basarat, Apr 18 '13 at 07:09
@jpmorin - i added the spaces by mistake while writing the question, url is fine. — Radu, Apr 18 '13 at 11:01
@Basarat Ali I don't have access to the code right now, but the information that I posted is retrieved from firebug's javascript debugging tool. — Radu, Apr 18 '13 at 11:11

score 3 · Answer 1 · answered May 16 '13 at 19:23

Have you tried:

    $http({method: 'GET', url: 'someURL'}).
            success(function(data, status, headers, config) {
                //set view model or do something.

            }).
            error(function(data, status, headers, config) {

            });

score 0 · Answer 2 · answered Dec 17 '15 at 20:15

Make sure that you have passed the parameters correctly if there are any.
The general syntax should be like the following :

$http.get('../link/yourApplication/searchBySomeNumber?someNum='+$scope.someNum+'&asOfDate='+asOfDate+'&status=undefined') 
            .success(function(data, status, headers, config) {
                //your code
                console.log('Data return successful');
            })
            .error(function(data, status, headers, config) {
                $scope.status = status;
                alert('Info Error');
                console.log('Group Info Error');
            });

score 0 · Answer 3 · edited May 23 '17 at 11:48

As $http returns a Promise, you can use the .then() method to log your results when the promise is resolved, or log an error in case anything goes wrong:

$http.get('http://localhost:5000/ping')
    .then(function(returnedJson) {
        console.log(returnedJson.data);
    })
    .catch(console.error) // or $log.error if you are using $log from Angular

Please note that the clean JSON response is obtained by logging the .data property of the returnedJson object. As it is a Promise, it contains other information that are not relevant to consume the web service.

Also note that the web service you want to consume should also be in the same domain as your Angular app, otherwise you may incur into a Cross Domain error, unless the service allows usage from external websites by exposing a Cross Domain Policy.

(Find more info here: Can someone post a well formed crossdomain.xml sample?)

If that's the case, this post should be helpful:

jQuery AJAX cross domain

Hope this helps.

How to call external rest service from angularjs?

3 Answers3