I am facing an issue while trying to log the data of the user based on the user tab that has been clicked. The problem is that it always displays the same data and not the data of other users.
https://i.sstatic.net/ACo7y.png
For example, when I click on Sara, it shows Sara's data. However, when I click on Edita, it still displays Sara's data. I need assistance on how to retrieve the data based on the user tab that has been clicked.
ts file
response: Array<any> = [];
getUsers(){
this.http.get('https://dummyapi.io/data/v1/user', {
headers: new HttpHeaders().set('app-id', '63a1a3fdf4c5089b8564caef'),
params: new HttpParams().set('limit', '50')
}).subscribe(data => {
this.response.push(data);
}), ((error: object) => {
console.log(error)
})
}
showChat(){
for(let i=0; i<this.response.length; i++){
console.log(this.response[0].data[i])
}
}
html file
<div class="user-bottom">
<div class="all-users" *ngFor="let array of response" (click)="showChat()" >
<div class="nested-items" *ngFor="let data of array.data">
<h4>{{data.firstName}}</h4>
<img src="{{data.picture}}" alt="profile">
</div>
</div>
</div>