How to get every object in an JSON array in Angular

Question

I'm new in AngularJS, and JS overall. But I think it's fairly simple coming from Java in school.

My first service contained this:

app.factory('User', function($http) {

  var user = {
     username : null,
     company : null,
     address : null,
     city: null,
     country: null
  };

  $http.get('/webservice/user').success(function(data){

     user.username = data.username;
     user.company = data.company;
     user.address = data.address;
     user.city =  data.city;
     user.country = data.country;

  })

  return user;

})

I accessed it from the UserCtrl:

app.controller('UserCtrl', ['$scope', 'User', function ($scope, User){
  $scope.user = User; 
}]);

And in the index.html I simply called:

{{user.username}} {{user.company}} ... 

And so forth.

Now I have an array of objects, I use this method:

app.factory('Cards', function($http) {

var cards = [{id:null, name: null, info: null}];

$http.get('/webservice/cards').success(function(data){

  for(var i=0;i<data.length;i++){
     cards[i] = data[i];
  }

})
  return cards;
})

The controller looks the same.

app.controller('SearchCtrl', ['$scope', 'Cards', function ($scope, Cards){

   $scope.cards = Cards;

}]);

And I access them with a

<li ng-repeat="card in cards">
{{card.id}} {{card.info}}</li>

My question is, do I really have to have a for loop in the $http.get() method?

Answer 1

No Need for the loop, angular js ng-repeat itself works as an foreach loop.

// Js Code
app.factory('Cards', function($http) {
    $scope.cards = [];
       $http.get('/webservice/cards').success(function(data){
            $scope.cards = data;
       }
   return $scope.cards;
   })
//html
<li ng-repeat="card in cards">
{{card.id}} {{card.info}}</li>

Answer 2

I solved this by using ngResource.

When doing using RESTful APIs this is the way to do it. Instead of using the $http.get() method, I simply used

app.factory('CardService', ['$resource', function($resource) {

   return $resource('/webservice/cards',{});

}]);

Using $scope inside of a service is not recommended, that way you have lost the functionality of the service.

In the controller, I then used:

app.controller("CardCtrl", ['$scope', 'CardService', function($scope, CardService){

$scope.cards = CardService.query();

})

Using the other ways caused conflict in the 2-way-binding. First it launched the controller, then checked the service, then the controller, then the service again. When working with an object, this worked great. Working with an array, this way is better.