CODEWITHSUNDEEP
angulartypescriptfirebasefirebase-realtime-databaseangularfire
abrahamlinkedin
abrahamlinkedin

Reputation: 467

AngularFire2 returning [object Object]

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)

enter image description here

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.

Upvotes: 4

Views: 2193

Answers (2)

abrahamlinkedin
abrahamlinkedin

Reputation: 467

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>

Upvotes: 3

Libu Mathew
Libu Mathew

Reputation: 2996

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.

Upvotes: 1

Related Questions