How to retrieve specific values from a list in AngularFire2

Question

I have a Firebase Realtime Database that looks like this:

Items:
    Object0:
        value1: "Foo-0"
        value2: "Bar-0"
    Object1:
        value1: "Foo-1"
        value2: "Bar-1"
    ...

... and so on, cut it down to simplify. Every "ObjectX" contains exactly the same structure, like value1, value2... The only difference between them is the values of value1, value2.

I need to get value1 from each of the objects. I can do that now by getting each object and assigning the values to a variable:

import { AngularFireDatabase } from '@angular/fire/database';
...
export class FooComponent{
  objectOne: ObjectModel = <ObjectModel>{};
  objectTwo: ObjectModel = <ObjectModel>{};

  constructor(private firebase: AngularFireDatabase) {}
  ngOnInit() {
    this.firebase
      .object('/Items/Object0')
      .valueChanges()
      .subscribe((objectm: ObjectModel ) => {
        this.objectOne = objectm; }

    this.firebase
      .object('/Items/Object1')
      .valueChanges()
      .subscribe((objectm: ObjectModel ) => {
        this.objectTwo = objectm; }

  valueOne = this.objectOne.value1; //"Foo-0"
  valueTwo = this.objectTwo.value1; //"Foo-1"
  }
}

export interface ObejctModel {
    value1: string;
    value2: string;   
  }

I imagine there is a way easier way to do this using firebase.list('/Items') instead of firebase.object, but I can't seem to find any solution that works for me. Can anyone help me refactor this code so it only uses 1 list instead of 2 (or more) objects?

Also, I must assign the values to variables in typescript, not the usual {{ items | async }} in the template approach.

Peter Haddad · Accepted Answer · 2019-06-25 11:01:23Z

3

You can do the following:

this.firebase.list('/Items').valueChanges().subscribe(items => {
     console.log(items);  
     items.forEach(values=>{ console.log(values) });
    });

The items will contain all the objects and the values in your database. You can also use forEach to iterate inside the array, that way you can access value1 and value2 without knowing the keys (Object0 and Object1).

edited Jun 25, 2019 at 11:01

answered Jun 25, 2019 at 9:49

Peter Haddad

81.2k26 gold badges148 silver badges149 bronze badges

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

8 Comments

Beist Beistson Over a year ago

Yes, this works, but how do I then assign a value in items to a variable? I imagined something like this.SomeVariable = items.Object0.value1, but this doesn't even seem to be close to how it actually works.

Peter Haddad Over a year ago

what are you getting in the log? can you post the array that you get here in the comment

Beist Beistson Over a year ago

(2) [{…}, {…}] Object0: value1: "Foo-0" value2: "Bar-1" __proto__: Object Object1: value1: "Foo-1" value2: "Bar-1" __proto__: Object

Beist Beistson Over a year ago

I tried console.log(items[0]) and got only Object0, then I tried console.log(items[0][0]) and got undefined instead of "Foo-0"

Peter Haddad Over a year ago

what you can do also is to loop inside the array, so like this items.forEach(values=>{ console.log(values) }); you should have all the values inside the console.log

|

Collectives™ on Stack Overflow

How to retrieve specific values from a list in AngularFire2

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related