Data not retrieving from Firebase in Angular 7

Question

I want retrieve a data set from firebase database and populate my drop down list. But nothing shows up. I done many research but i am still unable to fix this. I am using Angular 7.

ERROR Error: "Cannot find a differ supporting object 'function (events) {
            var snapshotChanges$ = Object(_snapshot_changes__WEBPACK_IMPORTED_MODULE_0__["snapshotChanges"])(query, events);
            return afDatabase.scheduler.keepUnstableUntilFirst(afDatabase.scheduler.runOutsideAngular(snapshotChanges$)).pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_5__["map"])(function (actions) { return actions.map(function (a) { return a.payload.val(); }); }));
        }' of type 'valueChanges'. NgFor only supports binding to Iterables such as Arrays."

category.service.ts

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

@Injectable()
export class CategoryService {

  constructor(private db: AngularFireDatabase) { }

  getCategories(){

    return this.db.list('/categories').valueChanges;//get categories list in database and return it
  }
}

product-form.component.ts

import { Component, OnInit } from '@angular/core';
import { CategoryService } from 'src/app/category.service';
import { ProductService } from 'src/app/product.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {

  categories$;

  constructor(private router: Router, private categoryService: CategoryService, private productService: ProductService) { 
    this.categories$ = categoryService.getCategories();
  }

Code segment related to problem in product-from.component.html

 <div class="form-group">
      <label for = "category">category</label>

      <select #category="ngModel" ngModel name="category" id ="category"class="form-control" required>
          <option value=""></option>
          <option *ngFor="let cate of categories$" [value]=" cate.$key ">{{ cate.name }}</option>
       </select>

       <div class="alert alert-danger" *ngIf="category.touched && category.invalid">Category is required.
       </div>
</div>

This is how my database looks like

Nuwan Alawatta · Accepted Answer · 2019-04-10 23:27:55Z

2

This is how my database looks like

Most probably the problem is with your database design. Try to change it from object-based design to array design as follow.

Export the JSON file from firebase and change the Categories to a array. So it will be look like below.

"Categories": [
    { "name":"Bread"},
    { "name":"Dairy" },
    { "name":"Fruits" },
    .....
    .....
    .....
  ]

Import the modified JSON to firebase.

answered Apr 10, 2019 at 23:27

Nuwan Alawatta

1,86521 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KP Singh · Accepted Answer · 2021-08-17 08:34:59Z

2

Change the getCatergories() method to this:

getCategories() {
return this.db
  .list('/categories', (ref) => ref.orderByChild('name'))
  .snapshotChanges()
  .pipe(
    map((actions) => {
      return actions.map((action) => ({
        key: action.key,
        val: action.payload.val(),
      }));
    })
  );

}

and call populate values in HTML like this:

<option *ngFor="let c of categories$|async" [value]="c.key">
    {{c.val.name}}
</option>

source : Unable to fetch $key from firebase in Angular5 template

answered Aug 17, 2021 at 8:34

KP Singh

4136 silver badges13 bronze badges

Collectives™ on Stack Overflow

Data not retrieving from Firebase in Angular 7

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related