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, May 10 '17 at 03: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, May 10 '17 at 03:50

score 2 · Answer 1 · answered Jun 10 '19 at 21:41

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

score 0 · Answer 2 · answered May 10 '17 at 04:52

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 '17 at 04:52

Deepender Sharma

460
1
5
25

score 0 · Answer 3 · answered Oct 05 '17 at 06:22

0

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

answered Oct 05 '17 at 06:22

Pragati Kerur

145
1
13

in Angular 6 , I had to remove the quotes around null *ngIf= "(grade|json) == null " – Dale Oct 11 '18 at 13:20

Angular2 How to ngIf empty object or array

3 Answers3