Iterating through array of objects from your angular 4 firebase database

Question

I have been getting some errors when i try iterating through my database, Ive tried couple of answers but to no avail. below is my

order-details.component.html

<header class="masthead h-75 text-white text-center">
  <div class="overlay"></div>
  <div class="container">
    <div class="home-info">
      <h1 class="cover-heading">Your Order</h1>
    </div>
  </div>
</header>
<hr class="hidden-md-down">
<div class="container" *ngFor="let item of items">
  <div class="row">
    <div class="col-12">
      <table class="table table-xs">
        <tr>
          <th></th>
          <th>Description</th>
          <th class="text-center">Amount</th>
          <th class="text-right">Price</th>
          <th class="text-right">Total</th>
        </tr>
        <tr class="item-row">
          <td> <img [src]=item.product.imageUrl class="thumbnail img-fluid"></td>
          <td>
            <p> <strong>{{ item.product.title }}</strong></p>
          </td>
          <td class="text-right" title="Amount">{{ item.quantity}} </td>
          <td class="text-right" title="Price">{{ item.product.price | currency:'NGN':true }}</td>
          <td class="text-right" title="Total">{{ item.totalPrice | currency:'NGN':true }}</td>
        </tr>
      </table>
    </div>
  </div>
</div>

My order-details.component.ts

import { Component, OnInit } from '@angular/core';
import {AngularFireDatabase} from 'angularfire2/database';
import {AuthService} from '../auth.service';
import {OrderService} from '../order.service';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-order-details',
  templateUrl: './order-details.component.html',
  styleUrls: ['./order-details.component.css']
})
export class OrderDetailsComponent implements OnInit {
  items = {};
  id;

  constructor( private db: AngularFireDatabase,
               public orderService: OrderService,
               private auth: AuthService,
               private route: ActivatedRoute) {
    this.id = this.route.snapshot.paramMap.get('id');

  }

  ngOnInit() {
    this.items = this.orderService.getOrdersByOrderId(this.id)
      .subscribe(items => {
        this.items = items;
        console.log(this.items);
      });
  }
  // getOrdersByOrderId() from my ORDER.SERVICE.TS
  getOrdersByOrderId(orderId) {
    if (!this.OrdersByOrderId$) {
      this.OrdersByOrderId$ = this.db.list('/orders/' + orderId + '/items');
    }
    return this.OrdersByOrderId$;
  }

}

THE ERROR I'M GETTING FROM MY JAVASCRIPT BROWSER CONSOLE.

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.ngOnChanges (common.es5.js:1734)

THE IMAGE BELOW IS MY DATABASE TREE FROM FIREBASE

as the error says you are providing an object for ngFor instead you need to provide an array. debug and see what you are pasing — Sajeetharan
– Sajeetharan, Commented Dec 17, 2017 at 16:26
@Sajeetharan I just tried instantiating items in orderdetails.ts as an empty array, but I'm still getting the same error — TOLULOPE ADETULA
– TOLULOPE ADETULA, Commented Dec 17, 2017 at 16:33

Sajeetharan · Accepted Answer · 2017-12-17 17:01:34Z

1

Just change your subscribe inside ngOnInit() , you are assigning the subscription and then assigning items back to items.

 ngOnInit() {
     this.orderService.getOrdersByOrderId(this.id)
      .subscribe(items => {
        this.items = items;
        console.log(this.items);
      });
  }

// i have removed this this.items =

answered Dec 17, 2017 at 17:01

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Collectives™ on Stack Overflow

Iterating through array of objects from your angular 4 firebase database

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related