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

Ionic Framework
1

Hello,
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].friend.id;

        

        console.log("IDs"+this.friendId);

    }

    */

    for(const data of this.friends) {

      console.log("IDS",data.friend.id);// element is JSON 

      this.friendId=data.friend.id

    }

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

    });

my HTML:
{{friendId}}

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

Thank you.