Nsryjdtyk

I have the following piece of code that retrieves records from Firebase DB using Angular and Ionic.

It works fine but does not give me the keys for each records. It gives me 'undefined'

I looked into various online tutorials and it looks like switching from valueChanges() to snapshotChanges() will do the job, but each online tutorial shows a different way to extract records there are also version discrepancies between what I am using and the one's that are online.

Since I am coming from Java world I am quite new to JS world.

Please guide.

home.ts

export class HomePage implements OnInit {



    private items$: Item = ;



    constructor(private  shoppingListService: ShoppingListService) {

      this.shoppingListService.getShoppingList().valueChanges().subscribe((datas) => {

        datas.forEach(data => {

          console.log(data);



          //data.key is undefined here

          console.log("=>" + data.key + " " + data.name + " " + data.quantity + " " + data.price);

          this.items$.push({key: data.key, name: data.name, quantity: data.quantity, price: data.price});

        })

      }, (err) => {

        console.log("problem:", err);

      });

    }



}

ShoppingListService.ts

@Injectable()

export class ShoppingListService {



  //here 'shopping-list' is the name of the table

  private shoppingListRef = this.db.list<Item>('shopping-list');



  constructor(private db: AngularFireDatabase) {

    this.getShoppingList();

  }



  getShoppingList() {

    return this.shoppingListRef;

  }



}

Item.model.ts

export interface Item {

  key?: string;

  name: string;

  quantity: number;

  price: number

}

package.json

"angularfire2": "^5.1.0",

"firebase": "^5.5.9",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "^6.0.0",

"rxjs-compat": "^6.3.3",

ionic info

Ionic:



   ionic (Ionic CLI)  : 4.4.0 (C:UsersabcAppDataRoamingnpmnode_modulesionic)

   Ionic Framework    : ionic-angular 3.9.2

   @ionic/app-scripts : 3.2.0



System:



   NodeJS : v10.13.0 (C:nodejsnode.exe)

   npm    : 6.4.1

   OS     : Windows 10

this.shoppingListService.getShoppingList().snapshotChanges().pipe(map((actions) => {

   actions.map(action => {

      console.log(action.payload.doc.data());

      var data = action.payload.doc.data();

      var id = action.payload.doc.id;

     //data.key is undefined here

      console.log("=>" + id + " " + data.name + " " + data.quantity + " " + data.price);

      this.items$.push({key: id, name: data.name, quantity: data.quantity, price: data.price});

    })

  }), catchError((err) => {

    console.log("problem:", err);

  });

try it and lemme know if u have any issues. Please import pipe, map and catchError from rxjs like below

import { Observable, of, throwError } from 'rxjs';

import { map, catchError } from 'rxjs/operators';

Angular Version is 6

Follow this link How to use snapshotchanges