CODEWITHSUNDEEP
angularfirebasefirebase-realtime-databaseangularfire
Arjun Panicker
Arjun Panicker

Reputation: 740

AngularFirebaseList get keys and Value

I am trying to use the real time database of Firebase and I have created an API for the list of books and their prices like this.

{  
  "Books":[
        {"Angular 4": "$9.99"},
        {"HTML 5": "$10.99"},
        {"CSS3": "$21.90"}
    ]
}

After importing all the required dependencies of AngularFirebase from angularfire2 package in npm, I have written the following code to retrieve the values from the database:

booklists: AngularFireList<any[]>;
booklistCollection: Observable<any[]>;

constructor(public angularFireDatabase: AngularFireDatabase) {
    this.booklists = angularFireDatabase.list('/Books');
    this.booklistCollection = this.booklists.snapshotChanges();
}

And in the app.component.html, I have written the following code to iterate through the observables.

<div>
  <ul>
    <li *ngFor="let booklist of booklistCollection | async">
      {{ booklist.key }} : {{ booklist.value }}
    </li>
  </ul>
</div>

But, the output only contains the keys and not the values.

I am not able to figure out a method to fetch both keys and values at the same time. I know that the values can be fetched separately using valueChanges() method of the AngularFirebaseList but I need a way to get both keys and values in a single go.

Upvotes: 1

Views: 1742

Answers (2)

Shameer S N
Shameer S N

Reputation: 103

I Solved the same problem as follows. payload.val() returns the object

<div>
  <ul>
    <li *ngFor="let booklist of booklistCollection | async">
      {{ booklist.key }} : {{ booklist?.payload?.val()?.value }}
    </li>
  </ul>
</div>

Upvotes: 1

amarnath
amarnath

Reputation: 51

For each item in snapshotChanges(), try item.payload.val()

Upvotes: 3

Related Questions