For loop only returns second item(and sometimes only the first one)

So the problem that I faced is every time I do a for loop on a JSON when I console.log the result
he gives me all the items but when I call it on the Html it only gets the second item.
Here is my code :

    this.Api.fetchUserProfileWithFriends(id).subscribe(data =>{  

      this.friends =data;

      console.log('Friends: ',data); 


      for( this.x = 0; this.x < this.friends.length; this.x++) {


        this.friendId  = this.friends[this.x];





    for(const data of this.friends) {

      console.log("IDS",;// element is JSON


      console.log('FriendsID: ',data);


my HTML:

I’m getting the same ID I don’t know why he is not looping when I pass it on my HTML.

Thank you.