How to append name with messages in chat program by using twilio?

Question

I am creating a chat web app in angular with twilio api. Currently my chat is showing and users can send messages but i want to show which user is currently sending message.

following is my http post request to twilio

 viewMessages():Observable<any>{
 return 
 this.http.get("https://chat.twilio.com/v2/Services/"+
 this.serviceId+"/Channels/"+this.myChannelId+
"/Messages",this.httpOpt).pipe(map(data=>data));
}

following is type script function

  name=localStorage.getItem('name');
  allMessages=[];
  totalMessages:number;
  //View all messages
  viewMessage(){
  console.log(this.name);
   this.chatBox.viewMessages().subscribe(res=>{
    this.allMessages=res.messages
  },
 err=>{
  console.log(err);
    })

}

and then i am showing names by interpolation.

Answer 1

You can loop the messages array and append name to it.

this.allMessages.forEach((message, index)=>{
    return this.allMessages[index] = `${this.name}: ${message}`;
});

console.log(this.allMessages);