Make condition with *ngFor

Question

I've got a connexion to an API media. Sometimes, some of objects are empty and i don't know how to exclude them.

html

<div class="container-fluid" style="background-color: #212529; width: 100%;">
<div class="box" >
<div class="list-group-item" id="blc" *ngFor="let media of medias">
  <h6><a href={{media.url}} >{{media.title}}</a></h6>
  <img class="responsive" width="600" height="400" [src]="media.urlToImage">
  <p><small>{{media.description}}</small></p>
</div>
</div>
</div>

ts

export class MediaComponent implements OnInit {
public medias = [];

constructor(public mediaService: MediaService,
private route: ActivatedRoute) { }

ngOnInit(): void {
this.route.queryParams.subscribe((params: {page?: string}) => {
this.mediaService.index(params).subscribe((res: {articles}) => {
console.log(res.articles)
this.medias = res.articles;
});
});
}
}

i want something like this :

<div class="container-fluid" style="background-color: #212529; width: 100%;">
****<div class="box" *ngIf ="media.title && media.description && media.urlToImage">****
<div class="list-group-item" id="blc" *ngFor="let media of medias">
  <h6><a href={{media.url}} >{{media.title}}</a></h6>
  <img class="responsive" width="600" height="400" [src]="media.urlToImage">
  <p><small>{{media.description}}</small></p>
</div>
</div>
</div>

Which objects exactly are empty ? Please add comment to your code snipets — captain-yossarian from Ukraine, Nov 21 '20 at 16:53
Does this answer your question? [How to filter object array based on attributes?](https://stackoverflow.com/questions/2722159/how-to-filter-object-array-based-on-attributes) — jayant0jha, Nov 21 '20 at 18:04

score 1 · Accepted Answer · answered Nov 21 '20 at 16:35

The easiest way would be to do something like this in component,

this.medias = res.articles.filter(Boolean); // will remove null or undefined value

or

this.medias = res.articles.filter(x => x.title && x.description && x.urlToImage);// will filter out any object in collection which doesn't have all three properties

But, if you insist doing it on template, you can do like this.

<div class="list-group-item" id="blc" *ngFor="let media of medias">
  <div *ngIf ="media.title && media.description && media.urlToImage"> 
      <--more content -->
  </div>
</div>

that exactly what i need : this.medias = res.articles.filter(x => x.title && x.description && x.urlToImage); thank you !!! — jumn7, Nov 21 '20 at 17:05

jayant0jha · Answer 2 · 2020-11-21T16:47:31.033

As you mentioned the api sometime returns empty objects you can check for the individual fields and display only those which have value.

<div class="container-fluid" style="background-color: #212529; width: 100%;">
  <div class="box" >
    <div class="list-group-item" id="blc" *ngFor="let media of medias">
        <h6 *ngIf="media.url && media.title"><a href={{media.url}} >{{media.title}}</a></h6>
        <img class="responsive" width="600" height="400" *ngIf="media.urlToImage" [src]="media.urlToImage">
        <p *ngIf="media.description"><small>{{media.description}}</small></p>
    </div>
  </div>
</div>

Or if you don't want to display the whole div if any of the fields is absent you might want to use :

<div class="container-fluid" style="background-color: #212529; width: 100%;">
    <div class="box" >
        <div class="list-group-item" id="blc" *ngFor="let media of medias">
            <div *ngIf="media.title && media.url && media.urlToImage && media.description">
            <h6><a href={{media.url}} >{{media.title}}</a></h6>
            <img class="responsive" width="600" height="400" [src]="media.urlToImage">
            <p><small>{{media.description}}</small></p>
        </div>
     </div>
</div>

You can also filter your array using rxjs pipe for only those values which have the required fields and loop over them just so that you won't have to use multiple conditions in DOM and you can loop over the array accordingly.

this.mediaService.index(params).pipe(filter(media => media.title && media.url && media.urlToImage && media.description )).subscribe((res: {articles}) => {
console.log(res.articles)
this.medias = res.articles;
});

Make condition with *ngFor

2 Answers2