How to return a single element in an array of an array in angular-CodePudding

I have a video array which is an element in an object of a response array . Now i want to return only a single video for each response title i.e , Each match should only have one highlight video.

Here's my endpoint

    "response": [
        {
            "title": "Chelsea - Brighton",
            "competition": "ENGLAND: Premier League",
            "videos": [
                {
                    "title": "Highlights",
                    "embed": "<div> A video 1<\/div>"
                },
                {
                    "title": "Highlights",
                    "embed": "<div> A video 2 <\/div>"
                }
            ]
        },
        {
            "title": "Brentford - Manchester City",
            "competition": "ENGLAND: Premier League",
           
            "videos": [
                {
                    "title": "Highlights",
                    "embed": "<div> A video  <\/div>"
                }
            ]
        }
}

My template


         <div >
      
            <div *ngFor="let video of result.videos">
              <ng-container *ngIf="video.title == 'Highlights'">
                <p [innerHTML]="video.embed | safe"></p>
                <p>{{out.title}}</p> 
              </ng-container>
            </div>
     </div>
     </div>```

I've tried ```<div *ngFor="let video of result.videos[0]"></div>``` But this gives only a single team result

CodePudding user response：

You can create a pipe to filter the videos based on the title:

@Pipe({name: 'filterVideos'})
export class FilterVideosPipe implements PipeTransform {
  transform(videos: any[], title: string): any {
    return videos.filter(video => video.title === title);
  }
}

and then use it as:

<div *ngFor="let video of result.videos | filterVideos:'Highlights'; let index=index">
    <ng-container *ngIf="index === 0">
        <p [innerHTML]="video.embed | safe"></p>
        <p>{{out.title}}</p> 
    </ng-container>
</div>

You can always enhance the Pipe transform method as per your requirements and make it generic.

Creating pipes for custom data transformations