Firebase Firestore displaying [object, object] instead of document data. How to fix?

Question

I have an app that takes in user input and uploads to firebase firestore. When i retrieve the documents from the firestore to display on another page on the app using a component it is displaying [object, object] the data i enter to firebase manually is displaying. I am unsure how to fix this any suggestions would be helpful.

      export interface Item{
        id?: string, 
        createdAt: number,
         title: string,
       description:string,
       carType:string,
       typeID: number,
       color: string,
       colorId: number
       }

   //item.service.ts
   export class ItemService {

    //property of items collection
    itemsCollection: AngularFirestoreCollection<Item>;

     items: Observable<any[]>;


   constructor(public fsDb: AngularFirestore) { 
     this.items = this.fsDb.collection('complete- 
       entry').valueChanges();

    }

     getItems(){
     return this.items;
      }
     }

   //items.component.ts
     export class ItemsComponent implements OnInit {

        items: Item[];
     constructor(private itemService: ItemService) { }

      ngOnInit() {
        this.itemService.getItems().subscribe(items=>{
           console.log(items);
         
           this.items = items;
            })
             }}
      //items.component.html

         <div *ngIf="items?.length >0;else noItems">
           <ion-list *ngFor="let items of items" class="collection">
        <ion-item class="collection-item">
          <strong>{{items.title}}: </strong>{{items.description}}  <br>
         </ion-item>

         </ion-list>
       </div>
       <!-- if there are not items display -->
   <ng-template #noItems>
        <hr>
     <h5>There are no items to display</h5>
   </ng-template>

Simon · Accepted Answer · 2021-04-16 15:30:42Z

1

From what I understand, the console.log is displaying the data in the console. What you are missing to display your items in the template is :

Loop over the items with an *ngFor

<ng-container *ngFor="let item of items">
...
</ng-container>

Inside that, interpolate and access the desired properties

{{ item.id }}
{{ item.createdAt }}
// Or even the whole object just to check
{{ item | json }}

So, to recap, in your template you have for example :

<div *ngFor="let item of items">
    Item title : {{ item.title }}
</div>

By the way, you can assign this.fsDb.collection().valueChanges() to the items property when declaring it in the service and use it directly from your component with no problem. 👍

You can test here (just set your Firebase app config in the AngularFireModule import) : https://stackblitz.com/edit/stackoverflow-67126446?file=src/app/app.module.ts

answered Apr 16, 2021 at 15:30

Simon

916 bronze badges

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

7 Comments

jessie Over a year ago

Hi thank you for your reply. I should have added the html before as i have this already and while it is showing data i manually entered into the database it isnt showing the nested data collect from the user and uploaded to firestore. It is displaying [object, object] instead of the data. I edited the post to reflect the html i have

Simon Over a year ago

If the problem resides in the input data from a form, you should provide us with some context. Are you able to show a screenshot of a data sample from Firestore?

jessie Over a year ago

I have added a screenshot of the data structure in firestore. Any suggestions would be appreciated.

Simon Over a year ago

Well first of all the data doesn't match with the Item interface you gave. What I see is { arousal: { arousal: Array<string>; }; title: { Activities: string; Description: string; } }. Maybe you made a mistake in your form (double arousal ?), or you should check the properties called in the template.

jessie Over a year ago

yes my apologies i copied in code i was trying on stackblitz. i have tried with the link you gave with the data matching. and it is sill returning [object,object]. i believe because i am trying to access the array in complete-entry document

|

Collectives™ on Stack Overflow

Firebase Firestore displaying [object, object] instead of document data. How to fix?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related