fix movie-details credits

src/app/services/movie.service.ts

@@ -40,13 +40,25 @@ export class MovieService {
     private mapMovieTrailer(objs: any[]): MovieTrailer[]{
         return objs.map((obj) => {
             return new MovieTrailer(obj.id, obj.key);
-        })
+        });
     }
 
     private mapMovieCredits(objs: any[]): MovieCredits[]{
-        return objs.map((obj) => {
-            return new MovieCredits(obj.order, obj.name, obj.known_for_department, obj.profile_path, obj.character);
-        })
+        const uniqueCreditsSet = new Set(objs.map(obj => obj.name)); 
+
+        const uniqueCreditsArray = Array.from(uniqueCreditsSet);
+
+        return uniqueCreditsArray.map(name => {
+            const matchingObj = objs.find(obj => obj.name === name);
+
+            return new MovieCredits(
+                matchingObj.order,
+                matchingObj.name,
+                matchingObj.known_for_department,
+                matchingObj.profile_path,
+                matchingObj.character
+            );
+        });
     }
 
     public selectMoviesByList(listType: string, changedPage: number): Observable<Movie[]>{

src/app/views/movie-details/movie-details.component.html

@@ -67,15 +67,15 @@ <h1 class="text-danger fw-semibold m-0">{{ movie.title }}</h1>
 
             <div class="d-flex flex-wrap gap-3">
                 <div class="d-flex gap-3"  
-                    *ngFor="let credit of movie.actors.slice(0, 4); let i = index">
+                    *ngFor="let credit of movie.actors.slice(0, 5); let i = index">
 
                     <img 
                     *ngIf="credit.profile && !credit.profile.includes('null')"
                     [src]="credit.profile"
                     class="app-icon rounded-circle">
 
                     <p>{{ credit.name }}</p>
-                    <span *ngIf="i < movie.actors.slice(0, 4).length - 1">•</span>
+                    <span *ngIf="i < movie.actors.slice(0, 5).length - 1">•</span>
                 </div>
             </div>
         </div>