AngularFire2 returning [object Object]

Question

I am trying to figure out where everything's gone wrong. All my observables return [object Object].

My sunshine.component.html

<h4>Welcome {{username$}}</h4>
<ul>
<li *ngFor="let addsnote of addsnotes$ | async">{{ addsnote }}</li>
</ul>

My sunshine.component.ts

import { Component, OnInit, Injectable } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';

export class ProfileComponent implements OnInit {
  private addsnotes$: FirebaseListObservable<string[]>;
  private username$: FirebaseObjectObservable<string>;
  private profileshow = false;
  addForm: FormGroup;

  constructor(private af: AngularFire){
    this.addForm = new FormGroup({
      'addnote': new FormControl()
    });
  }

  ngOnInit(){
    let user = firebase.auth().currentUser,
    userNamePath = `users/${user.uid}/username`,
    notesPath = `users/${user.uid}/addnote`;
    this.username$ = this.af.database.object(userNamePath);
    this.addsnotes$ = this.af.database.list(notesPath);
  }

  addSubmit(){this.addsnotes$.push('Billy Dee Williams');}

}

Portions of my Firebase database

{
  "users" : {
    "4twiyaFxVmaESXGWIfW4BwRXh893" : {
      "addnote" : {
        "-KSmWtpUSFXPCL4O3aKr" : "Do the dishes"
      },
      "useremail" : "[email protected]",
      "username" : "majic"
    },
    "PYuSE6zyAENdKREZGTHm5VH1DXn1" : {
      "addnote" : {
        "-KSoZM7sH6X5ahMq7S5y" : "Du the dishes",
        "-KSoZMimZzm6ZGQowmuL" : "Du the dishes",
        "-KSouEXkc1UkyISGTCHd" : "Du the dishes"
      },
      "useremail" : "[email protected]",
      "username" : "asdasd"
    }
  }
}

A screenshot of my page (for the sake of clarity)

EDIT I have included a repo of my ongoing project here, so as to provide you all with as much info as possible. Hopefully it's useful.

https://github.com/emjayweb/demo

The respective files are in src/app/profile/profile.component. As this is completely WIP, please don't fuss about the logistics of it (guard routing, validation, etc).

The way this works is you enter some dummy data on the home page Create Account, then click on the Profile link on the navigation. You will probably have to refresh the page first. When you click on the button in the Profile route, you enter 'Billy Dee Williams' to your addnote array, and the view should reflect that.

You need a | async in the title as well, as FirebaseObjectObservable is also an async observable that needs to be unwrapped: <h4>Welcome {{username$ | async}}</h4>. We're working on some ways to make this simpler with directives. — Kato
– Kato, Commented Sep 29, 2016 at 18:55
thanks for the info. I was wondering how I would format async with objects. This still does not solve my [object Object] issue unfortunately. I remain puzzled as to why this is happening. — abrahamlinkedin
– abrahamlinkedin, Commented Sep 29, 2016 at 19:09
Try piping it to json then and see what you've got. {{ username | async | json }} — Kato
– Kato, Commented Sep 29, 2016 at 22:38
I actually already got it. The answer is below. But I'm not allowed to check my own answer until tomorrow. Thanks! — abrahamlinkedin
– abrahamlinkedin, Commented Sep 29, 2016 at 22:39

Community · Accepted Answer · 2017-05-23 12:32:30Z

3

Got the answer from a different question. What I had to do was add $.value tags to my HTML. In the case of my list observable, it would have been:

 <li *ngFor="let addsnote of addsnotes$ | async">{{ addsnote.$value }}</li>

And for my object observable, it would have been:

<h4>Welcome {{ (username$ | async)?.$value }}</h4>

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Sep 29, 2016 at 20:24

abrahamlinkedin

4671 gold badge7 silver badges23 bronze badges

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

1 Comment

Prashant Pimpale Over a year ago

Is above code will work in angular 4 also with latest version of angularfire2

Libu Mathew · Accepted Answer · 2016-09-29 09:54:35Z

1

In the below code 'addsnote' is an array of object.

<li *ngFor="let addsnote of addsnotes$ | async">{{ addsnote }}</li>

Just Check the below code.

<li *ngFor="let addsnote of addsnotes$ | async">{{ addsnote[0] }}</li>

Then you can understand how to access the data.

answered Sep 29, 2016 at 9:54

Libu Mathew

2,99626 silver badges31 bronze badges

1 Comment

abrahamlinkedin Over a year ago

For additional info, the empty bullet points I get using your code corresponds correctly with the amount of items I have in my database. So an li is being printed out. However, that li is empty. And adding or removing the respective list items changes the amount of empty li tags that I have in my code.

Collectives™ on Stack Overflow

AngularFire2 returning [object Object]

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related