$ http.get with Angular JS

6

Looking for data from an api through $ http.get, but I find an error.

My request within a service:

app.service('pessoas',function($http){
     this.getHumanos = function(callback){
            $http.get('http://private-ff1c4-grupo.apiary-mock.com/pessoas').success(callback);
        };
});

and Here where inside my controller where I get the data:

app.controller('servico',function($scope, pessoas){
    pessoas.getHumanos(function(data){      
            $scope.pessoas = data;
    });
});

Error shown in console:

SyntaxError: Unexpected token i
    at Object.parse (native)
    at pc (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:14:208)
    at Zb (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:76:379)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:77:237
    at s (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:7:302)
    at Zc (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:77:219)
    at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:78:349)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:112:20
    at l.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:125:305)
    at l.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:122:398)
    
asked by anonymous 24.11.2015 / 14:30

2 answers

4

I ran your code with no problem. Maybe the error is being caused by some element not mentioned in the posted code.

Follow the functional example - click > Run Code Snippet .

var app = angular.module("app", []);

app.service('pessoas',function($http){
     this.getHumanos = function(callback){
            $http.get('http://private-ff1c4-grupo.apiary-mock.com/pessoas').success(callback);
        };
});

app.controller('servico',function($scope, pessoas){
    pessoas.getHumanos(function(data){      
            $scope.pessoas = data;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script><divng-app="app" ng-controller="servico">
  <p ng-repeat="x in pessoas">
    {{x.idade}} {{x.nome}}
  </p>
</div>
    
25.11.2015 / 01:06
4

EDIT 1

Your error is in the callback. Change to:

app.service('pessoas',function($http){
     this.getHumanos = function(callback){
        $http.get('http://private-ff1c4-grupo.apiary-mock.com/pessoas').then(function successCallback(response) {
            callback(response);
        }, function errorCallback(response) {
            console.error('Error: ' + response);
        });
    };
});

EDIT 2

The reason for the change.

First: Whenever working with angular ajax calls have two methods. One of success. And others that many do not use and the method of failure or error is important. So if any problem occurs it is easier to track it, as well as what is best for the end user.

Second:

The method I always use by specifying success is then and not the success itself. I soon believe that this may be causing the reported problem due to call or going from parameters to the incorrect cal.

I still add an interesting article.

When using non-angular service and factory

    
24.11.2015 / 14:36