Angularfire2 - Retrieving all values in an object without referring the parent object's key?

Question

I want every object under each date under an expense category, in the Firebase Database.

In Firebase:

- expenses
      - food
          - 07-11-2016 //"I want every object in here"
              + -KX7Aju4_G6i6pcNoBzj

In my view I've tried:

       <div *ngFor="let date of food | async">

          <ion-item-divider sticky>
            {{date.$key}}
          </ion-item-divider>

          <div *ngFor="let item of date"> //This don't seem to work
            <ion-item>
              <h3>{{item.title}}</h3>
              <p>
                {{item.amount}} Kr &mdash;
                kl. {{item.time}}
              </p>
            </ion-item>
          </div>

        </div>

FIREBASE WARNING: Exception was thrown by user callback. Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Clearly it gives me the date as an object, not an array.

I've also tried retrieving the values in JSON, but iterating the JSON object with *ngFor (with out the pipe async) also gives me a bunch of problems.

  /* Returns a Firebase list object as a JSON object */
  getAsJSON(firebaseList: any){
    firebaseList
      .map(obj => obj.map(obj => {
        return obj;
      }));
  }

I'm trying to iterate the firebase list object "food".

this.food = af.database.list('/expenses/food');

OR

this.food_json = getAsJSON(this.food);

I've read and tried a bunch, but I can't seem to find the right solution.

For you second ngFor you need to transform object to array, use pipe for that. Good answer is here: http://stackoverflow.com/questions/35647365/how-to-display-json-object-using-ngfor/35647396#35647396 — Yevgen, Nov 22 '16 at 10:42

score 0 · Answer 1 · answered Nov 22 '16 at 10:33

0

import {Component} from '@angular/core';
import {AngularFire, FirebaseListObservable} from 'angularfire2';

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of items | async">
       {{ item | json }}
    </li>
  </ul>
  `,
})
export class AppComponent {
  items: FirebaseListObservable<any>;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
}

retrieving-data-as-lists

answered Nov 22 '16 at 10:33

ksav

20,015
6
46
66

Adding the json pipe will output the object as a string, like: { "key": { "variable": "value" } }. My question is how to access each value in an object under a date in a category, without specifying the date. Not how to print the whole object as a pretty string version to HTML. – Kevin Frostad Nov 22 '16 at 11:05
Why don't you want to specify the date? – ksav Nov 22 '16 at 11:35
That has nothing to do with the question. That's not what you achieve with the json pipe. – Kevin Frostad Nov 22 '16 at 12:45
I'm just trying to understand your motivation for structuring your data in this way. – ksav Nov 22 '16 at 14:14
I need to organize each item based on when it's added. – Kevin Frostad Nov 22 '16 at 14:20
Sorry, need to ask this again: Why don't you want to specify the date? – ksav Nov 22 '16 at 14:42
If you look at the code it's already specified with "date.$key". Getting the date was never a problem. – Kevin Frostad Nov 22 '16 at 15:10

Angularfire2 - Retrieving all values in an object without referring the parent object's key?

1 Answers1