Reading data from firebase realtime database and display as a list using Angular

Question

I am trying to implement the product list by following the video, but the list doesnt display the products that I have listed in the firebase database. Can someone help?

product-form.component.html

<div class="form-group">
       <label for ="category">Category</label>
        <select id="category" class="form-control">
            <option value=""></option>
            <option *ngFor="let c of categories$ | async" value="c.$key">
                {{ c.name }}
            </option>
        </select>            
</div>

product-form.component.ts

export class ProductFormComponent implements OnInit {
  categories$;
  
  constructor(categoryService: CategoryService) { 
    this.categories$= categoryService.getCategories();
  }

  ngOnInit() {
  }

}

category.service.ts

export class CategoryService {

  constructor(private db:AngularFireDatabase) { }


  getCategories() {
    return this.db.list('/categories');


  }
}

I have manually entered the categories in the firebase realtime database looks like this. categories

Categories in the database

Adrita Sharma · Accepted Answer · 2019-10-20 07:25:59Z

2

Try like this:

getCategories() {
    return this.db.list('/categories').snapshotChanges();
}

answered Oct 20, 2019 at 7:25

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

4 Comments

Indrajit Ravi Over a year ago

Thanks @adrita, i tried your suggestion. The categories list are now populated with 3 empty values which wasnt displayed previously. However the names aren't displayed.

Edric Over a year ago

@IndrajitRavi It's probably because you've stored the names in the objects of the keys.

Edric Over a year ago

Could you log what getCategories returns in your component? I haven't used the Realtime Database so I'm not sure as to how your data is actually represented.

Indrajit Ravi Over a year ago

@Edric Thank you, i changed it from c.name to c.key in the product-form.html and the list got populated.

Collectives™ on Stack Overflow

Reading data from firebase realtime database and display as a list using Angular

product-form.component.html

product-form.component.ts

category.service.ts

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

product-form.component.html

product-form.component.ts

category.service.ts

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related