Updating data from http request in Angular

Question

I've got an interface that basically lets you add, edit, or delete a user. When the component initializes it does an http request to the server to get current users. So if you go to edit or delete a user there is a dropdown of all the users received from that request. The problem is that if the I delete a user for example through http request, I need to then send another get request to update the data client side so that if you were to open the dropdown again it would reflect the changes made. I can fix this problem by running 'ngOnInit()' again after successful request but this means I'm 'subscribing' every time the user does something..

ngOnInit() {
   this.service.getUsers()
   .subscribe(payload => {
      payload.forEach(user => {
         this.users.push(user);
      });
   });
}

I'm new to Angular so I'm not entirely sure the best way to go about it but I feel like running this method of 'subscribing' every time the user performs a request is wrong. Any help would be appreciated.

Alvin Saldanha · Accepted Answer · 2021-02-17 01:03:30Z

Ideally It's best if you request the data from the server once you have performed a POST/Delete operation just to be sure that you get the latest/correct data from the server. So Yes, it is OK to get data again after delete.

I have give the code sample below of typically how you can do it. Don't forget to unsubscribe the observables and dispose of them later.

private subscriptions = new Subscription();

ngOnInit() {
  this.refreshList()
}

deleteUser(id: string) {
        this.subscriptions.add(
            this.service.deleteUser(id).subscribe(
                success => {
                    this.notificationService.showNotification(`User deleted: ${success.name}`);
                    this.refreshList();
                },
                errors => this.notificationService.showErrors('Error deleting User', errors)
            )
        );
    }

refreshList() {
this.subscriptions.add(
 this.service.getUsers()
   .subscribe(payload => {
        this.users = payload;         
   }));
}

ngOnDestroy() {
    this.subscriptions.unsubscribe();
}

atiyar · Accepted Answer · 2021-02-17 01:50:11Z

0

Refactor out the code that requests for current users in a private method, so that you can reuse it -

private loadUsers(): void {
    this.service.getUsers()
        .subscribe(payload => {
            payload.forEach(user => {
                this.users.push(user);
            });
        });
}

Then you can call that private method from inside the ngOnInit() -

ngOnInit() {
    this.loadUsers();
}

and also from inside your delete method, when the deletion is done -

deleteUser(id: number): void {
    this.service.deleteUsers(id)
        .subscribe(p => {
            console.log('User deleted Successfully!');
            this.loadUsers();    // reusing loadUsers()
        });
}

answered Feb 17, 2021 at 1:50

atiyar

8,3857 gold badges41 silver badges83 bronze badges

Comments

Ahmed Shehatah · Accepted Answer · 2021-02-17 01:07:02Z

0

All you have to do is removing the deleted user from the users array locally inside your class after you get success response from the delete request. Do not use this.ngOnInit(); and of course don't subscribe again to the same api to get the new data.

Let's say that you get the id of the user you want to delete and send this id to through the delete api, you save it in a poroperty userId. Then:

get user index in the users array: let deletedUserIndex = this.users.findIndex(item => item.id === this.userId);
delete the user object from the users array: this.users.splice(deletedUserIndex, 1);

And that's it

answered Feb 17, 2021 at 1:07

Ahmed Shehatah

6685 silver badges11 bronze badges

Collectives™ on Stack Overflow

Updating data from http request in Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related