Struggling to show data from the console on the view screen

Question

Struggling to show data from the console on the view screen

I have a Firestore database structured in a particular way, and at the moment I am focused on retrieving data from the userFavorites collection.

Looking at My Favorite Service

   async getfavoriteList(): Promise<firebase.firestore.QuerySnapshot> {
    const user: firebase.User = await this.authService.getUser();
    if (user) 
          {
    this.FavoriteListRef = firebase
      .firestore()
      .collection(`userFavorites`);
    return this.FavoriteListRef.where('uid', '==', user.uid).get();
              }
           } 
       }

Regarding Favorite TS

  favoriteList: any; 
  public favoriteListRef: firebase.firestore.CollectionReference;


    this.favoriteService.getfavoriteList().then(favoriteListSnapshot => {
      this.favoriteList = [];
      favoriteListSnapshot.forEach(snap => {
        this.favoriteList.push({
          id: snap.id,
          favoriteList: snap.data().favourite
        });
        console.log(snap.data().favourite)
        return false;
      });
    });
  }

Upon logging the data using -- console.log(snap.data().favourite), it appears correctly within the console logs.

However, when attempting to display this data within the view utilizing the provided HTML structure, there are some issues encountered. I have also attempted outputting the data using JSON pipe.

<ion-grid>
        <ion-row>
        <ion-col size="12" >
        <ion-card *ngFor ="let favorite of favoriteList">
            <div class="card-title">{{ favorite | json }}</div>
         <div>{{favorite?.description}}</div>
        </ion-card>
        </ion-col>
      </ion-row>
      </ion-grid>

At this point, it seems that something is not functioning as expected. What could be causing this discrepancy?

angular typescript google-cloud-firestore ionic4

Answer 1

Answer №1

You have initialized an array:

this.favoriteList = [];

Next, you are adding an item to it:

 this.favoriteList.push({
      id: snap.id,
      favoriteList: snap.data().favourite
    });

As a result, you now have a nested array structure:

 favoriteList[i].favoriteList // make sure to iterate through this

To handle this code, make the necessary changes as shown below:

    <ion-card *ngFor ="let favorite of favoriteList">   
        <ng-container *ngFor="let item of favorite?.favoriteList">
            <img [src]="item.image[0]">
            <div class="card-title">{{ item | json }}</div>
            <div>{{item?.description}}</div>
        </ng-container>
    </ion-card>

Answer 2

You have initialized an array:

this.favoriteList = [];

Next, you are adding an item to it:

 this.favoriteList.push({
      id: snap.id,
      favoriteList: snap.data().favourite
    });

As a result, you now have a nested array structure:

 favoriteList[i].favoriteList // make sure to iterate through this

To handle this code, make the necessary changes as shown below:

    <ion-card *ngFor ="let favorite of favoriteList">   
        <ng-container *ngFor="let item of favorite?.favoriteList">
            <img [src]="item.image[0]">
            <div class="card-title">{{ item | json }}</div>
            <div>{{item?.description}}</div>
        </ng-container>
    </ion-card>

Answer 3

Answer №2

Due to the asynchronous nature of populating your array, the initial parsing of the array in your html may occur when it is still empty. Since Angular does not refresh its view unless a new reference is provided for the array during population, manual change detection is required once the array is full. Alternatively, you can implement the following:

private favoriteListDisplay = new BehaviourSubject<any[]>([]);

Instead of using console.log, you can use:

this.favouriteListDisplay.next(this.favoriteList)

Then adjust your html like this:

<ion-card *ngFor ="let favorite of favoriteListDisplay | async">

This approach instructs Angular to trigger another cycle of change detection for displaying your data effectively.

Answer 4

Due to the asynchronous nature of populating your array, the initial parsing of the array in your html may occur when it is still empty. Since Angular does not refresh its view unless a new reference is provided for the array during population, manual change detection is required once the array is full. Alternatively, you can implement the following:

private favoriteListDisplay = new BehaviourSubject<any[]>([]);

Instead of using console.log, you can use:

this.favouriteListDisplay.next(this.favoriteList)

Then adjust your html like this:

<ion-card *ngFor ="let favorite of favoriteListDisplay | async">

This approach instructs Angular to trigger another cycle of change detection for displaying your data effectively.

Answer 5

Answer №3

While iterating through the favoriteList using

<ion-card *ngFor ="let favorite of favoriteList">

, it seems that each object in the array consists of an id and a sub-array named favoriteList.

{
  id: snap.id,
  favoriteList: snap.data().favourite
}

Your template is attempting to reference properties that are not present within the favoriteList.

Answer 6

While iterating through the favoriteList using

<ion-card *ngFor ="let favorite of favoriteList">

, it seems that each object in the array consists of an id and a sub-array named favoriteList.

{
  id: snap.id,
  favoriteList: snap.data().favourite
}

Your template is attempting to reference properties that are not present within the favoriteList.

Struggling to show data from the console on the view screen

Answer №1

Answer №2

Answer №3

Similar questions

In Bootstrap 3, rows are aligned on the same line

Dealing with consecutive time period inquiries in Angular

Is there a missing .fillGeometry in the Figma plugin VectorNode?

Incorporate an interface for handling potential null values using Typescript

Enhance the Filtering Options in Angular Material Table by Adding and Removing Multiple Custom Terms

Want to enhance user experience? Simply click on the chart in MUI X charts BarChart to retrieve data effortlessly!

Differences Between Angular 2 Reactive Forms and Template Forms

Prevent a specific directory from being compiled in MSBuild using Typescript

Is it possible to define TypeScript interfaces in a separate file and utilize them without the need for importing?

What steps should I take to resolve the deprecation of node-sass usage?

Tips for integrating Vanilla JS Signature Pad into an Angular 8 project

Creating a wrapper component to enhance an existing component in Vue - A step-by-step guide

Upgrade from AngularJS to the latest version of Angular, version 8

The TypeScript error message indicates that a value typed as 'string | undefined' cannot be assigned to a type 'string'

Tips for testing Observable.fromEvent

Navigating conflicts between packages that utilize TypeScript can be tricky. Here are some strategies for handling these situations

Guide to Reverting the Two-Way ngModel Binding Data in Angular 2

Bring in personalized tag to TypeScript

TypeScript overloading error: Anticipated 0 parameters, received 2 instead

Pause for a few moments until assigning a new value to the observable