$http.get with Angular JS

Asked

Viewed 913 times

6

searching 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)
angularjs http
  • 1

    Try to put the error calling also the callback. Observing: those functions success and error is depreciated, manipulates with Promise.

  • Hello, I put the error too, I did not understand the part of Promise, but well, I keep getting the same error.

  • Face this is not syntax error? What is this i? Doesn’t have a i lost in the code?

  • There’s no i in the code I’ve reviewed several times haha, look here: https://github.com/HenriRique/angularHttp

  • 1

    In the answer to the url http://private-ff1c4-grupo.apiary-mock.com/pessoas the key age is not in quotes. Try to leave it in quotes.

  • It worked Buddy, just one more little doubt it’s returning me array, how do I loop in ng-repeat? pq the list is appearing empty

  • ng-repeat="item in pessoas" the name item can be anyone you want and pessoas is the name of $scope which contains the data. If you are using a <ul> ng-repeat must be placed in the <li>, that is, always in the element you want to repeat. <li ng-repeat="item in pessoas"> {{item.nome}} </li>

Show 2 more comments

2 answers

5

EDIT 1

Your error is in 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 ajax calls at the angle has two methods. One of success. And another that many do not use and it is important the method of failure or error. So in case any problem occurs it is easier to track it, in addition to what is best for the end user.

According to:

The method I always use indicating the sucess is the then and not the sucess proper. I therefore believe that this may be generating the reported problem due to calling or passing parameters to the incorrect lime;back.

I still add an interesting article.

When to use service and Factory at the angle

  • Can you explain why you have to make this change? Your answer may be correct, but it is vague.

  • I made this modification but did not understand the part of Return down there. Only then he keeps saying that my function getHumanos is not defined when I call.

  • No service should be used the this and not the return. Use it that way: this.getHumanos = function(callback){ ... }

  • @jbueno done! Includes explanation

  • @oOAkiraOo vlw by the touch I fixed already

4


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

Follow the functional example - click on > Execute Snippet of Code.

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>

<div ng-app="app" ng-controller="servico">
  <p ng-repeat="x in pessoas">
    {{x.idade}} {{x.nome}}
  </p>
</div>

Browser other questions tagged angularjs http

You are not signed in. Login or sign up in order to post.