Find item index in angular

Question

I have delete function which will emit socket.io then socket update other party items list and remove this item (replace static text) the problem is when I receive socket data I cannot find match item to update it.

Logic

1. User 1 delete message
2. User 2 get (static text) such as this message was deleted

Flow

1. User 1 delete message (works)
2. Message gets deleted for User 1 (works)
3. socket.io gets inform of this delete (works)
4. User 2 gets deleted message data from socket.io (works)
5. socket.io find and replace deleted message (not work)

Code

User 1 delete message

async presentPopover(ev: any, indexOfelement: any, own: any) {

    // send clicked item data to popover (popover will delete it and send back results)
    const popover = await this.popoverController.create({
      component: MessagesComponent,
      cssClass: 'my-custom-class',
      event: ev,
      componentProps: { id: ev, index: indexOfelement, from: 'pchat', own },
      translucent: true
    });

    // returned results from popover
    popover.onDidDismiss().then((result: object) => {
      console.log('res2021 1: ', result);
      console.log('this.room.messages 2: ', this.room.messages);
      if (result['data']) {
          this.socket.emit('messageDelete', { message: result['data'] }); // data is "id: 187, index: 15"
          this.room.messages.splice(result['data'].index, 1); // remove message from user 1 list (prefered if replace the text as well here instead of removing it)
      }
    });
    return await popover.present();
}

(popover)

// delete message (in popover)
Pdelete(event) {
    this.privateChatsService.deleteMessage(this.navParams.get('id')).subscribe((res: any) => {
        this.popoverController.dismiss({ id: this.navParams.get('id'), index: this.navParams.get('index') }); //send back data
    });
}

User 2 gets update about deleted message

ngOnInit() {
    // remove deleted message
    this.socket.fromEvent('messDel').subscribe((message: any) => {
        console.log('from del emit in private chat: ', message); // data is "id: 187, index: 15"
        this.room.messages.splice(message.msg.message.index, 1); // make changes in deleted item ("index" cannot be found)
    });
    // end of socket.io
}

Note: Problem is in this.room.messages.splice(message.msg.message.index, 1); code where socket cannot find correct item based on the index the rest is working just fine.

Answer 1

Solved

In regard to

this.room.messages.splice(result['data'].index, 1); // remove message from user 1 list (prefered if replace the text as well here instead of removing it)

I've added extra object to my response from popover to update my list items instead of remove them

Pdelete(event) {
    this.privateChatsService.deleteMessage(this.navParams.get('id')).subscribe((res: any) => {
      this.popoverController.dismiss({ id: this.navParams.get('id'), index: this.navParams.get('index'), deleted_at: res.data.deleted_at });
    });
  }

Added deleted_at because that's what I check in HTML in order to show placeholder text.

Then for finding my correct item I've changed my socket listener to:

this.socket.fromEvent('messDel').subscribe((message: any) => {
      this.room.messages.find(item => item.id == message.msg.message.id).deleted_at = message.msg.message.deleted_at;
});

I find the item id based on popover response id, then I update deleted_at value so it can show placeholder text.

Also for User 1 who deleted this message I did same code as socket listener therefore message doesn't get removed from his/her list, instead shows placeholder text

// returned results from popover
popover.onDidDismiss().then((result: object) => {
      if (result['data']) {
        this.socket.emit('messageDelete', { message: result['data'] });
        this.room.messages.find(item => item.id == result['data'].id).deleted_at = result['data'].deleted_at;
      }
});