How to check for attribute in view if it is undefined

Ionic Framework ionic-v3
1

Hello,

I am building an app with a Firebase backend, which does not include attributes that are empty in the object being retrieved from the database, e.g.

"nTLkkcjws4SQfL53iswZUOYGNKO2" : {
      "followerCount" : 1,
      "followers" : {
        "VzEXD7bK1NTxATti84XUoy3zq473" : true
      },
      "followingCount" : 0,
      "name" : "xxx",
      "surname" : "zzz"
    }

The problem stems from the fact that my user does not have any records in the following attribute and thus Firebase does not include it in the result. However, I have to check for its existence when *ngFor-ing these results in my list with ion-item, here’s an exmaple:

<button ion-button [outline]="!person.following[currentUid]" (click)="onFollowToggle(person.$key)">

As you can see, I’d like to show the outline attribute only if the following attribute does not have the currentUid property that I am checking for. However, since the following attribute does not even exist because it is empty, the compiler gives me this error:

Cannot read property xyz of undefined.

How can I check for the existence of this property without breaking my code? I have already tried things such as hasOwnProperty or $exists (as specified by firebase docs) but none seem to work.

Thanks a lot for your help

2

That isn’t what the docs say. $exists is a tester for the node nTLk…, Testing for falsy or truthy is a standard Javascript issue and Firebase doesn’t help, how could it.

In your provider that reads the stream from Firebase, normalize your data.
if (!followingCount) { followingCount = 0; }
or whatever you need to do. Then have your page subscribe to the normalized stream, and that goes into your ngFor. Your page doesn’t subscribe to Firebase directly. That has the positive side effect of only querying Firebase when there’s a change to the database values, instead of querying Firebase whenever you refresh the page.

3

Hello Aaron,

I am very grateful for your advice. I have managed to make it work. One more question though… When handling a large amount of data, doesn’t this approach slow the entire process of loading / processing my json objects?

4

Yes, but it only slows it once, and you might even be able to do the work in the background by passing it to a web worker, depending on what else you have going on. If instead you handle it in the page, your template will keep refreshing ngIfs or whatever you use. So it’s probably better to show a spinner and preprocess the large data one time, so you can display it “instantly” after that, and your pages take no performance hit.

1 Like
5

Something occurs to me: in my own apps, I try to arrange the user interface so I only need to process data when it’s requested. Meaning: the big list only features properties that are guaranteed to be there, like title and photo (and I use default title and photo if they don’t exist). Then if the user taps an item, I check for existence of all properties of that particular item. if you can restructure like that, you don’t need to clean some huge dataset before using it. Instead you only clean the data points the user is interested in.