Angular2 How to ngIf empty object or array

Question

I am getting json object from the server and they are deep nested.

Anyway, I want to show 'The user hasn't filled in yet' when the json object is empty (or array)

I tried almost everything but they didn't work. What am I doing wrong?

<div class="common-container" *ngFor="let detail of deepTeaInfo | getValues">
  <div id="exp-box" *ngFor="let grade of detail['introduceInfo']['grade'] | getValues">
    <p class="fontstyle3">Grade: <span class="fontstyle2">{{grade.category | type_transform}}</span></p>
    <p class="fontstyle3">Period: <span class="fontstyle2"> {{grade.when | type_transform}}</span></p>
    <p class="fontstyle3">Description: <span class="fontstyle2"> {{grade.description}}</span> </p>

    <p class="fontstyle2" *ngIf="grade?.length > 0">
      The user hasn't filled in yet
    </p>
  </div>
  <br>
</div>

The things I've tried

 *ngIf="grade?.length > 0"

*ngIf = "(grade|json) == '{}'"

*ngIf = "grade.length >0"

*ngIf = "(grade|json).length >0"

*ngIf "(grade|json) == ({}|json)"

they didn't work.

If I {{grade.json}} in the html, I see something like

 {when: 2011, description: temp, category: school},
 {when: 2011, description: temp, category: school}

If I {{grade}} in the html, I see

 [object Object]
 [object Object]

(I know that the array is empty seeing from the json string that I got from the server :))

What am I doing wrong?

To test both arrays and objects for "emptyness" you can use Object.keys(o).length — Aluan Haddad
– Aluan Haddad, Commented May 10, 2017 at 3:47
grade is just an object . I bet you want to check if the array is empty, not? If so, (detail['introduceInfo']['grade'] | getValues)?.length > 0 should work. — developer033
– developer033, Commented May 10, 2017 at 3:50

Sumit · Accepted Answer · 2019-06-10 21:41:55Z

2

Your question/code doesn't seem to be sufficient to tell whether its array or object.

Case 1: Array

    <div *ngIf="array?.length">

Duplicate https://stackoverflow.com/a/55177735/2488600

Case 2: Object

    <div  *ngIf="(object | keyvalue)?.length">

Duplicate https://stackoverflow.com/a/56532650/2488600

answered Jun 10, 2019 at 21:41

Sumit

8817 silver badges12 bronze badges

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

Comments

Deepender Sharma · Accepted Answer · 2017-05-10 04:52:13Z

0

for each object you should store it in a model and in template you can easily check whether that particular model has data or not. This is the ideal way to store the nested json objects into the models.

answered May 10, 2017 at 4:52

Deepender Sharma

4901 gold badge7 silver badges26 bronze badges

Comments

Pragati Kerur · Accepted Answer · 2017-10-05 06:22:37Z

0

This worked for me *ngIf= "(grade|json) == 'null' "

answered Oct 5, 2017 at 6:22

Pragati Kerur

1451 silver badge14 bronze badges

1 Comment

Dale Over a year ago

in Angular 6 , I had to remove the quotes around null *ngIf= "(grade|json) == null "

Collectives™ on Stack Overflow

Angular2 How to ngIf empty object or array

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related