Finding it difficult to display data that is displayed on the console to display in the view

view data in r
chrome console log
r view function
chrome console default levels disabled
chrome console.log not working
chrome console commands list
chrome console filter
chrome console log to file

I have a Firestore database which looks like this. I am currently retrieving data from the userFavorites collection.

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();
              }
           } 
       }

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;
      });
    });
  }

Now, When I console.log this data using -- console.log(snap.data().favourite) ,

I see the data in the console.

However, this data is not displaying in the view with the following HTML I have tried. I have also tried dumping out the data with JSON pipe.

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

What am I doing wrong?

You've created an array:

this.favoriteList = [];

then you are pushing an item:

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

So your have nested array:

 favoriteList[i].favoriteList // you should iterate here

So the code should look like this:

    <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>

How to Display Data as Table in Browser Console, How to Display Data as Table in Browser Console In Chrome, we can select View > Developer > JavaScript Console Shown below is an error-free Chrome Console. useful, as it shows the Array in a table format that is easy to read. Reproduction of materials found on this site, in any form, without� Did a clean install of Windows 10 after upgrade issues. 2nd hard drive is now missing. Properties in Device manager sees the hard drive, but It does not show up in "This Computer" or File folder.

Since you are populating your array in an async way, the first time your html parses the array it is still empty. However since you are not providing a new reference for this array when you are populating it, Angular does not refresh its view. So you either need to run manual changetection after you know the array is full or you can do something like:

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

and then instead of your console.log you can do:

this.favouriteListDisplay.next(this.favoriteList)

and then your html:

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

this way you will tell angular to trigger another cycle of detecting changes and displaying your data.

Get Started With Logging Messages In The Console, There are even more methods than what has been demonstrated in this section. At the end of the tutorial you'll learn how to explore the rest of the methods. View � Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

It looks like you're looping through favoriteList with <ion-card *ngFor ="let favorite of favoriteList">. The structure of favoriteList is an array of object with each object having and id and and favoriteList array.

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

In your template you're trying to access properties that do not exist on the favoriteList.

Displaying the Console View, Digital Workspace; Intrinsic Security; By Industry; Software-Defined Data Center Find a Partner or Solution The console view for an active virtual machine is like the monitor screen of a Tabs make it easy to switch among active virtual machines (Windows host). Displaying Multiple Virtual Machines at the Same Time. This software also allows you to convert external hard drive from MBR to GPT without data loss, clone external hard drive, etc. Verdict. It’s bothering to meet files not showing in external hard drive problem. When you are in such a condition, calm down and find out the most possible reasons that caused this problem and take measures accordingly.

Using the Data Viewer – RStudio Support, You can invoke the viewer in a console by calling the View function on the To remove sorting and show the data in the order R sees it, click the empty The search feature matches the literal text you type in with the displayed values, The number of rows the viewer can display is effectively unbounded,� The purpose of this command line tool is to find the list of files, change the name of a file, search files by Security Identifier, etc. Copy and paste the command and click OK. Check out how the command works. fsutil fsinfo drives . For listing hard drives, diskpart command can also be used by deploying the disk management console.

Viewing AWS CloudFormation stack data and resources on the AWS , the AWS Management Console to view its data and resources. You can view the following stack information: Stack info. Displays general information about the � Commands like fdisk, sfdisk and cfdisk are general partitioning tools that can not only display the partition information, but also modify them. 1. fdisk. Fdisk is the most commonly used command to check the partitions on a disk. The fdisk command can display the partitions and details like file system type.

Log Inspector, Use this tool to inspect debug logs that include database events, Apex processing, workflow, Developer Console Log Inspector Select Panels window The Execution Stack panel displays a “bottom-up” view of the currently selected item in� You can view the SQL code generated for queries and change processing by using the Log property. This approach can be useful for understanding LINQ to SQL functionality and for debugging specific problems. Example. The following example uses the Log property to display SQL code in the console window before the code is executed. You can use this

Comments
  • are there any errors in the console?
  • poor Question naming :)
  • favoriteList maybe empty
  • you can try displaying it as is with JSON.stringify()