How to use HTTP.GET in AngularJS correctly? (Dynamically)

Question

I create it has a service, and then pass it to my controller, The problem is that i have it to read a static file only (1.json), and now that i have populated this folder with more than one json, i would like to know, how can I bring them all in, and make this call dynamically.

Service:

todoApp.factory('eventData', function($http, $q){
return {
    getEvent: function(){
        var deferred = $q.defer();

        $http({method: 'GET', url: '/data/phonebook/1'}).
            success(function (data, status, headers, config){
                deferred.resolve(data);
            }).
            error(function (data, status, headers, config){
                deferred.reject(status);
            });

            return deferred.promise;
    }
};
});

Controller:

todoApp.controller('FeederController',
function FeederController($scope, eventData) {
    eventData.getEvent().then(
        function(event){$scope.event = event;},
        function(statusCode) {console.log(statusCode)});
}

);

Best Wishes

mikeswright49 · Accepted Answer · 2015-07-23 16:01:01Z

1

You'll want to parameterize your service call. Once there you can just change your code to handle 1=>N calls rather than one using a loop.

todoApp.factory('eventData', function($http, $q){
    return {
    getEvent: function(id){
    var deferred = $q.defer();

    $http({method: 'GET', url: '/data/phonebook/'+id}).
        success(function (data, status, headers, config){
            deferred.resolve(data);
        }).
        error(function (data, status, headers, config){
            deferred.reject(status);
        });

        return deferred.promise;
      }
    };
});

and your controller becomes

todoApp.controller('FeederController',
   function FeederController($scope, eventData) {
       $scope.events = [];
       for(var i=0; i<10; i++){
       eventData.getEvent(i).then(
           function(event){$scope.events.push(event);},
           function(statusCode) {console.log(statusCode)});
       }
      }
);

answered Jul 23, 2015 at 16:01

mikeswright49

3,41622 silver badges22 bronze badges

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

1 Comment

misterzik Over a year ago

After trying your solution, my server dies, I only have 2 entries for now, so i modify the count from 1<2. I also added the file extension after ID. After making these changes the server no longer hangs and i am able to see the page, but I can't see the entries. Perhaps something went wrong on my .HTML or .JSON, If you could please take a look at my gist, and tell me where it went wrong GIST Much Respects.

jgraham · Accepted Answer · 2015-07-23 18:54:46Z

1

It is good to keep consistent when using .then() vs. .success(). Also, you can use the $http.get() method.

todoApp.factory('eventData', function($http, $q){
    return {
       getEvent: function(id){

          var deferred = $q.defer();

          $http.get('/data/phonebook/' + id).then(function(data) {
             deferred.resolve(data);
          }, function (data, status) {
             deferred.reject(status);
          });

          return deferred.promise;
       }
    };
});

Then you can get the id of your choice by passing in the id you need.

todoApp.controller('FeederController', 
   function FeederController($scope, eventData) {

   $scope.GetEvent = function(id) {
      eventData.getEvent(id).then(function(event){
         $scope.event = event;
      }, function(statusCode) {
       console.log(statusCode);
      });
   };
});

Then get the info how ever you want.

answered Jul 23, 2015 at 18:54

jgraham

239 bronze badges

7 Comments

misterzik Over a year ago

{{event.phone}} won't work, and this is my json file: code {"name": "John Foo", "id": 1, "phone": "201-555-6666", "ext": "123", "departs": "Automation"} /code

jgraham Over a year ago

@misterzik, how is your json stored? Have you tried ("/data/phonebook/" + id +".json")?

misterzik Over a year ago

yes i already did that, i believe there is a problem with how i setup my json please refer to this [Gist]gist.github.com/misterzik/2a43304a09e424fc7c19 i posted all my files using the first answer, which is pretty similar to yours. thanks a lot man.

jgraham Over a year ago

I see your controller is assigning to a $scope variable of events and your html has event. If events has the info then you need to ng-repeat event in events to get the data.

misterzik Over a year ago

thanks buddy, you were right i was messing up by not adding the ng-repeat & calling wrong events. Everything is working sweet now but i've one problem. I decided to go with mikeswright49 solution and using a for loop, but the problem is that it will crash the server if the number of files don't match the count, do you know any way to by pass this error and keep it more dynamically? gist.github.com/misterzik/2a43304a09e424fc7c19

|

Collectives™ on Stack Overflow

How to use HTTP.GET in AngularJS correctly? (Dynamically)

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related