0

I hope you're all fine, so I am having a little problem, I am getting data from firebase and I have an array containing an array and I want to show it in my view but I can't, I will write my code and 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 I am getting an error in my console :

ERROR TypeError: Cannot read property 'comment' of undefined

But when I write only {{cmt}} instead of {{cmt.comment}}, I get something like this :

publisher: Erick
content : Something is written here 

,[object Object],[object Object]

- 
- [object Object]
- [object Object]



publisher: Patrick
content : News here 

,[object Object]

- 
- [object Object]

Which means That I am getting my objects but the first one is always empty, I don't know why, and I want to show my comment text.

I hope I well explained my problem, any help would be much appreciated.

3
  • 1
    can you check for undefined of cmt and see if it works well? something like cmt ? cmt.comment : ' no data ' Commented Feb 16, 2018 at 13:04
  • 1
    You can see your what is in your object using json pipe like this {{cmt | json}} Commented Feb 16, 2018 at 13:07
  • 1
    Antoine : I tried it and I get the data right I guess, for example I get this one for Patrick's comment : { "comment":"Yes","commentator": "Patrick" }, Do you think that the ' " ' is causing a problem ? Commented Feb 16, 2018 at 13:15

1 Answer 1

1

It sounds like you just need the safe navigation operator so the template doesn't try to access the properties of the object before it is defined.

Try the following:

<li *ngFor="let cmt of post.comments" >{{ cmt?.comment }}</li>
Sign up to request clarification or add additional context in comments.

2 Comments

Well, You're right somehow, I am getting my data using your method but I am receiving an additional empty object in the begging of my array, I dont know from where I am getting it but it was the one causing problems, And I still dont know how to solve that. Thank you for your precious time Sir.
Glad I could help! Consider accepting and / or upvoting the answer so others know that my answer was helpful (up arrow) or that your question has been answered (check mark). Welcome to SO :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.