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.
This question is related to
javascript
arrays
angularjs
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.
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>
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.
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">
Source: Stackoverflow.com