CODEWITHSUNDEEP
javascriptarraysangularjs
tekstrand
tekstrand

Reputation: 1493

ng-if check if array is empty

The API I am working with returns this if there are no items in the array

items: []

If there are items in the array it returns something like

items: [
  {
    name: 'Bla'
  }
]

In my template I believe I need to use ng-if to either show/hide an element based on whether there is data in there or not.

<p ng-if="post.capabilities.items"><strong>Topics</strong>: <span ng-repeat="topic in post.capabilities.items">{{topic.name}}</p>

However I could be totally off base as this is my first time working in Angular, and there may be a much better way to do what I am trying to do.

Upvotes: 86

Views: 254375

Answers (5)

omar mahjoubi
omar mahjoubi

Reputation: 11

this is the solution :

 <div *ngIf="post.capabilities.items.length > 0 && post.capabilities.items[0] !== '' "> ..... </div>

checks whether post.capabilities.items has a length greater than zero and ensures that the first item in the array is not an empty string. This ensures that content is displayed only if there are post.capabilities.items available and the first item in the list isn't an empty string .

Upvotes: 1

Daniel Xav De Oliveira
Daniel Xav De Oliveira

Reputation: 428

In my experience, doing this on the HTML template proved difficult so I decided to use an event to call a function on TS and then check the condition. If true make condition equals to true and then use that variable on the ngIf on HTML

    emptyClause(array:any) {


        if (array.length === 0) {
            // array empty or does not exist

            this.emptyMessage=false;

    }else{

            this.emptyMessage=true;
        }
}

HTML

        <div class="row">

        <form>
            <div class="col-md-1 col-sm-1 col-xs-1"></div>
            <div class="col-md-10 col-sm-10 col-xs-10">
        <div [hidden]="emptyMessage" class="alert alert-danger">

            No Clauses Have Been Identified For the Search Criteria

        </div>
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1"></div>
        </form>

Upvotes: 0

Grant
Grant

Reputation: 6309

To overcome the null / undefined issue, try using the ? operator to check existence:

<p ng-if="post?.capabilities?.items?.length > 0">

  • Sidenote, if anyone got to this page looking for an Ionic Framework answer, ensure you use *ngIf:

    <p *ngIf="post?.capabilities?.items?.length > 0">

Upvotes: 40

Dmitri Pavlutin
Dmitri Pavlutin

Reputation: 19060

Verify the length property of the array to be greater than 0:

<p ng-if="post.capabilities.items.length > 0">
   <strong>Topics</strong>: 
   <span ng-repeat="topic in post.capabilities.items">
     {{topic.name}}
   </span>
</p>

Arrays (objects) in JavaScript are truthy values, so your initial verification <p ng-if="post.capabilities.items"> evaluates always to true, even if the array is empty.

Upvotes: 55

Martijn Welker
Martijn Welker

Reputation: 5605

post.capabilities.items will still be defined because it's an empty array, if you check post.capabilities.items.length it should work fine because 0 is falsy.

Upvotes: 129

Related Questions