Reading data from firebase database angular 8

Question

I'm trying to read data from firebase databse, well here is my code: my component:

import { Component, OnInit } from '@angular/core';
import { ProductService } from 'src/app/services/product.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-admin-products',
  templateUrl: './admin-products.component.html',
  styleUrls: ['./admin-products.component.css']
})
export class AdminProductsComponent implements OnInit {
  products$:Observable<any>;
  constructor(private productService: ProductService) {

    //Just try to log what the db will give me back

    this.productService.getProducts().subscribe(re=>console.log(re));
  }

  ngOnInit() {
    this.products$=this.productService.getProducts();
  }

}

here is my ProductService:

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  constructor(private db: AngularFireDatabase) { }

  postProduct(formValue) {
    this.db.list('/products').push(formValue);
  }

  getProducts(){
    return  this.db.list('/products').snapshotChanges(); 
  }
}

I got the following result in my console: result in the console

and my database is the following: my database, only the products node is used in this code

what I need from the database is the keys and the values (using valuechanges() instead of snapshotchanges() give only the values without keys), and the result that I got is a mess, plz guys how do you read from database in firebase?

"dependencies": {
    "@angular/animations": "~8.2.3",
    "@angular/common": "~8.2.3",
    "@angular/compiler": "~8.2.3",
    "@angular/core": "~8.2.3",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.3",
    "@angular/platform-browser": "~8.2.3",
    "@angular/platform-browser-dynamic": "~8.2.3",
    "@angular/router": "~8.2.3",
    "@ng-bootstrap/ng-bootstrap": "^5.1.1",
    "bootstrap": "^4.3.1",
    "firebase": "^6.6.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.0",
    "@angular/cli": "~8.3.0",
    "@angular/compiler-cli": "~8.2.3",
    "@angular/language-service": "~8.2.3",
    "@types/node": "~8.9.4",
    "ts-node": "~7.0.0",
    "typescript": "~3.5.3"
  }

Answer 1

The way to get the keys and the payload from snapshotChanges is using payload.val() for payload and payload.key for the key:

return this.db.list('/products').snapshotChanges().pipe(
  map((products: any[]) => products.map(prod => {
    const payload = prod.payload.val();
    const key = prod.key;
    return <any>{ key, ...payload };
  })),
);

Please don't use any, TypeScript, as the name says, main purpose is the strongly typed data. It will help you tremendously to start typing your data, since IDE will tell you when you are trying to do something wrong. Above I used any, since you haven't typed your data. But don't do it! ;)