CODEWITHSUNDEEP
angularobservable
kr_v
kr_v

Reputation: 139

Update only the object from array that has data changed

I have list of some users displayed in my Angular app, the users are stored in usersList.users array. I added a modal window for editing each user, editing works and data is saved in database, but after the modal window is closed, the userlist is gone and only the user that was edited is visible in the list.

Code for modal window

    this.usersService.editUser(this.userId)
      .pipe(
        finalize(() => {
          this.isVisible = false;
          this.isOkLoading = false;
        })
      )
      .subscribe(
        data => {
          this.usersList.users = [data];
        },
        error => {
          this.message.create('error', 'Could not update user');
        }
      );

userList model, used for displaying users in pages:

    users: User[]; //users per page
    count: number; //total count of users in database
    hasMore: boolean; //true if there are any users in next page

The problem is, after I save the edited user and press okay, modal window closes and there is only the edited user in the list. How do I only update the edited user data in the list and have all the previous users in the list also?

Upvotes: 1

Views: 539

Answers (2)

StepUp
StepUp

Reputation: 38094

You are setting in subscribe() method the list of users:

.subscribe(
    data => {
      this.usersList.users = [data]; // here you are updating your user list
    },
    error => {
      this.message.create('error', 'Could not update user');
    }
  );

So you can either comment this line:

this.usersList.users = [data]; // here you are updating your user list

or make again AJAX call to get all users.

In addition, in RXJS you can use just pipe method without subscribe:

this.usersService.editUser(this.userId)
  .pipe(
    map((res) => {
      this.isVisible = false;
      this.isOkLoading = false;
      // this.usersList.users = res.json();
    })
  )

pipe() is used for chaining observable operators and subscribe() method is used to turn on observable and to listen emitted values by observable.

Upvotes: 1

SiddAjmera
SiddAjmera

Reputation: 39432

Inside your subscribe block, you're resetting your this.usersList.users array with an array containing just the updated user Object in an array.

It looks like you're getting the updated user as the response of your editUser call. If that's actually the case, then you need to first find the index of the user with that userId and then place your updated user at that index.

Something like this:

this.usersService.editUser(this.userId)
  .pipe(
    finalize(() => {
      this.isVisible = false;
      this.isOkLoading = false;
    })
  )
  .subscribe(
    data => {
      const indexOfUpdatedUser = this.usersList.users.findIndex(user => user.id === this.userId);
      this.usersList.users[indexOfUpdatedUser] = data;
    },
    error => {
      this.message.create('error', 'Could not update user');
    }
  );

PS: I've assumed that each object in this.usersList.users array has an id property on them.

Upvotes: 1

Related Questions