how to call a function to load an array in angular js

Question

I am reading values from json file. I created a sample json file.

contact.json:
  [
   {
     "id":"1",
     "Name":"abc"
   }
  ]

I created a service class

ContactsService.
    app.factory('ContactsService', function ($rootScope, $http, $log) {
        var contacts = [];
        return {
            getContactsList: function() {
                return contacts;
            },
            loadContactsFromJson: function () {
                var promise = $http.get('json/contacts.json')
                    .success(function(response) {
                        contacts = response;                    
                        return contacts;
                    })
                    .error(function(response) {                 
                        contacts = [];
                        return contacts;
                    });
                    return promise;
            }
        };
    }); 

In my controller class:

 init();
 function init() {       
   ContactsService.loadContactsFromJson();       
 }
 $scope.contactsList = function() {
   return ContactsService.getContactsList();
 };

but here contactsList is a function but I am trying to create an array contactlist in my controller class and trying to load the array in init() function. Later for the click event i want to add more contacts to this contactlist( contactlist.push). How do I read values from ContactsService.getContactsList() method to an array variable instead of function?

Answer 1

Create public variable (property of Service) and then just link Controller to it.

//Service
return {
    ...
    contactsList: []
    ...
}

and in Controller:

//Controller
$scope.contactsList = ContactsService.contactsList;

Answer 2

I think you can let the promises you've set up do the work for you. Try something like this in the controller:

ContactsService.loadContactsFromJson().then(function (contacts) { 
  $scope.contactsList = contacts;
}

If you wanted to I suppose you could wrap that in your init function. Hope this helps!

Answer 3

In javascript objects are passed by reference. However when you do contacts = response inside a function copy of the reference is created and the initial reference is broken (call-by-reference), thus the changes made to the contacts variable are not applied to $scope.contactList.

Try doing smt. like contacts.push['test'] inside success function to see it yourself.