api connected to friend page for display

src/app/components/friend-page/friend-page.component.html

@@ -38,20 +38,12 @@
     </div>
 
     <div class="p-4 space-y-3">
+      <div *ngFor="let friend of listFriend" class="friend flex items-center justify-between space-x-3">
         <div class="friend flex items-center space-x-3">
-        <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/100?img=1" alt="Friend 1">
-        <span class="text-gray-900 dark:text-white">Alice</span>
+          <img class="w-10 h-10 rounded-full" src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png" alt="Friend 2">
+          <span class="text-gray-900 dark:text-white">{{ friend.username }}</span>
         </div>
-      <div class="friend flex items-center space-x-3">
-        <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/100?img=2" alt="Friend 2">
-        <span class="text-gray-900 dark:text-white">Bob</span>
-      </div>
-      <div class="friend flex items-center justify-between space-x-3">
-        <div class="flex items-center space-x-3">
-          <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/100?img=3" alt="Friend 3">
-          <span class="text-gray-900 dark:text-white">Charlie</span>
-        </div>
-        <div class="flex space-x-2">
+        <div *ngIf="friend.status == 'pending'" class="flex space-x-2">
           <button class="p-2 bg-green-500 text-white rounded-full">
             <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
@@ -64,8 +56,11 @@
           </button>
         </div>
       </div>
+
     </div>    
 
+    
+    
     <!-- Pied du modal -->
     <div class="flex justify-end p-4 border-t dark:border-gray-700">
       <button

src/app/components/friend-page/friend-page.component.ts

@@ -1,24 +1,41 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FriendsService } from '../../services/friends/friends.service';
-import { User } from '../../model/User';
+import { NgFor, NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-friend-page',
-  imports: [],
+  imports: [NgFor, NgIf],
   templateUrl: './friend-page.component.html',
-  styleUrl: './friend-page.component.css'
+  styleUrls: ['./friend-page.component.css']
 })
-export class FriendPageComponent {
+export class FriendPageComponent implements OnInit {
+  listFriend: {username: string, status: string}[] = [];
+  userId: string = "";
+  status: string = "";
 
-  private readonly listFriend : User[] = [];
-  constructor(friendService : FriendsService){
-    friendService.getFriend().subscribe((data) => {
-      this.listFriend.push();
-    });;
+  constructor(private friendService: FriendsService) {
   }
 
+  ngOnInit(): void {
+    this.getFriendData();
+    console.log(this.listFriend)
+  }
 
-  
-
+  private getFriendData(): void {
+    this.friendService.getFriend().subscribe((data: any[]) => {
+      if (data.length > 0) {
+        data.forEach(friend => {
+          let status = friend['status'];
+          let userId = friend['friend_user_id'];
+          this.friendService.getFriendById(userId).subscribe((friendData: any) => {
+            this.listFriend.push({
+              username: friendData.username,
+              status: status
+            });
+          });
+        });
+      }
+    });
+  }
   
 }

src/app/services/friends/friends.service.ts

@@ -11,16 +11,21 @@ export class FriendsService {
   private token = localStorage.getItem('auth_token');
   constructor(private http: HttpClient) { }
 
-
   getFriend() {
     const url = `${this.apiURL}/friends`;
     const headers = new HttpHeaders({
       'Content-Type': 'application/json',
       Authorization: 'Bearer ' + this.token,
     });
-    return this.http.get(url);
+    return this.http.get<any[]>(url, { headers });
   }
 
-
-
+  getFriendById(id: string) {
+    const url = `${this.apiURL}/user/${id}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer ' + this.token,
+    });
+    return this.http.get<any>(url, { headers });
+  }
 }