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

Question

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 class="panel">
      
            <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

Siddhant · Accepted Answer · 2021-12-30 07:44:12Z

2

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

answered Dec 30, 2021 at 7:44

Siddhant

3,2112 gold badges10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patiee Over a year ago

This did the job bro , thanks !

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related