Getting empty object from database using angular 5 from database ?

Question

Hello I have a little problem that I dont know how to solve, I have asked a question before because things were not obvious to me but they're now, here, I will write my code and try to explain what I want to achieve later.

This is the data in my database :

posts 
     --- 1 
          --- puslisher -- "Erick" 
          --- content :   "Something is written here"
          --- comments 
                      --- 1
                           --- comment : "Yes"
                           --- commentator : "Patrick"  
                      --- 2 
                           --- comment : "I dont think so "
                           --- commentator : "Sarah"
     --- 2 
          --- puslisher -- "Patrick" 
          --- content :   "News here .."
          --- comments 
                      --- 1
                           --- comment : "Yes"
                           --- commentator : "Ines"

I get the data in my app.component.ts :

export class AppComponent implements OnInit {

    pubs:Observable<any[]>;
    constructor(private db:AngularFireDatabase){
    }
    ngOnInit(){
       this.pubs = this.getData('/posts');
    }

    getData(path):Observable<any[]>{
       return this.db.list(path).valueChanges()
    }

}

Here is my HTML code :

<div *nfFor="let post of pubs | async ">
    <p>publisher {{post.publisher}}</p>
    <p>content : {{post.content}}</p>
    <div>{{post.comments}}</div>
    <ul> 
       <li *ngFor="let cmt of post.comments" >{{cmt?.comment}}</li>
    </ul>
</div>

But as you can see my first object is empty and that is causing problems to :

publisher: Erick
content : Something is written here 

,[object Object],[object Object]

-                
- Yes
- I don't think so



publisher: Patrick
content : News here 

,[object Object]

- 
- Yes

This is causing me the problem that you can see in the picture.

Any help would be much appreciated.

Pavan Bahuguni · Accepted Answer · 2018-02-21 04:29:13Z

1

Thats because you are using {{post.comments}} it is internally calling Object.toString() method which returns**[object Object]**. So you need to use json pipe to stringify your object and display it.

Try following code.

<div *nfFor="let post of pubs | async ">
    <p>publisher {{post.publisher}}</p>
    <p>content : {{post.content}}</p>
    <div>{{post.comments | json}}</div>
    <ul> 
       <li *ngFor="let cmt of post.comments" >{{cmt?.comment}}</li>
    </ul>
</div>

answered Feb 21, 2018 at 4:29

Pavan Bahuguni

2,0251 gold badge19 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Getting empty object from database using angular 5 from database ?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related