angular - fail to update array from service

Question

I got a service that contain some contacts (name,phone). The controller has array that contain a reference to the array from the service so for every change on the array all gets updated.

Service:

app.service('ContactManagerService', function()
{
    this.Contacts=[];
    ...
    this.AddContact=function(Contact){...};
    this.RemoveContact=function(Contact){...};
    ...
});

First question: Is this a good approach? Should every controller/directive need to have a direct reference to the original array from the service? I have read a lot about setting up some events from the service to the controllers when the array has been changed, but it sound stupid because the array on the controller will be change anyway (because its the same array) and the ng-repeat will be updated automatically.

Second problem: The service has a method that replace the array to new one:

this.ReplaceContacts=function(NewContacts)
    {
        this.Contacts=NewContacts;
    });

The ng-repeat does not update because the controller still got the old reference to the old array. So a refresh need to be done.

I tried to replace the code to this one so the same array's reference wont change, but when the the code enter the foreach, this.Contacts array is undefined and the code stops. Why ?!

this.ReplaceContacts=function(NewContacts)
        {
            this.Contacts.splice(0, this.Contacts.length); //remove all contacts
            NewContacts.forEach(function (contact, index) 
            {
                this.Contacts.push(contact);//place the new ones
            });
        });

The controller code:

app.controller("myCtrl",
    function ($scope,ContactManagerService)
    {
        $scope.Contacts = ContactManagerService.Contacts;

        $scope.AddContact= function (Contact1) {
            ContactManagerService.AddContact(Contact1);
        }
        $scope.RemoveContact = function (ContactID) {
            ContactManagerService.RemoveContact(ContactID);
        }
    });

I hope everything is clear, Thanks.

In this.Contacts.push(contact);, this has a different context — ABOS
– ABOS, Commented Aug 22, 2015 at 12:53
It's correct, but I don't like it. It breaks encapsulation by exposing the service internals everywhere, and encouraging controllers to directly modify the array instead of going through the service methods. — JB Nizet
– JB Nizet, Commented Aug 22, 2015 at 13:09

JB Nizet · Accepted Answer · 2015-08-22 12:52:49Z

2

Because the callback function passed to forEach isn't bound to the service instance. So this, inside the callback, is not the service.

My advice: avoid this like the plague. It's an enormous source of bugs in JavaScript.

Use

 var self = this;

at the top of the service, and use self instead of this everywhere.

Or bind the callback function to the service instance:

NewContacts.forEach(function (contact, index) {
    ...
}, this);

answered Aug 22, 2015 at 12:52

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

3 Comments

Stav Alfi Over a year ago

thanks man but i didnt fully understand what var self = this will do?

JB Nizet Over a year ago

It will assign this (the service) to the variable self, and this variable will thus point to the service as this does. Except that self will always point to the service, whereas this doesn't always, depending on where you use it (like, for example, in a callback function).

Stav Alfi Over a year ago

thanks. Any chance you can tell me if the approach on my first question is currect? have not find anything usefull over google.

Satpal · Accepted Answer · 2015-08-22 12:55:10Z

1

You can simply push elements to Contacts using Array.prototype.push()

The push() method adds one or more elements to the end of an array and returns the new length of the array.

this.ReplaceContacts=function(NewContacts){
    this.Contacts.splice(0, this.Contacts.length); //remove all contacts
    Array.prototype.push(this.Contacts, NewContacts);
});

answered Aug 22, 2015 at 12:55

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

charlietfl · Accepted Answer · 2015-08-22 13:00:15Z

1

As mentioned in previous anser, context of this in forEach loop is not what you think it is.

A simplification would be to use Array.prototype.concat():

var self = this;
self.ReplaceContacts = function (NewContacts) {
    self.Contacts.splice(0, this.Contacts.length); //remove all contacts
    self.Contacts.concat(NewContacts);   
});

edited Aug 22, 2015 at 13:00

answered Aug 22, 2015 at 12:57

charlietfl

172k14 gold badges125 silver badges154 bronze badges

5 Comments

charlietfl Over a year ago

First question really depends on use case.

Stav Alfi Over a year ago

so in my example is it a good approach? I have not found something usefull in google

charlietfl Over a year ago

direct reference can be very helpful

Stav Alfi Over a year ago

I read that the controller should not get direct access to delete/update/add on any data.

charlietfl Over a year ago

That's fine, but doesn't mean not using direct reference to array in controller. If add/delete is done in service the referenced array in controller will still reflect changes

Collectives™ on Stack Overflow

angular - fail to update array from service

3 Answers 3

3 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related