Retrieve and showcase information from Firebase using Angular

Question

Retrieve and showcase information from Firebase using Angular

I need to showcase some data stored in firebase on my HTML page with a specific database structure. I want to present the years as a clickable array and upon selecting a year, retrieve the corresponding records in my code.

Although I managed to display a static array of years like ["1999", "1994"], I encountered difficulties when attempting to fetch and display the database records.

<div class="list-group" *ngFor="let year of years">
    <a routerLink="records" routerLinkActive="active">
        <mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year}}</a>
</div>

export class NavigationComponent implements OnInit {
  @ViewChild('sidenav', {static: true}) sidenav: ElementRef;

  clicked: boolean;
  resizedImage: Blob;

  years:AngularFireList<any[]>;
 
  constructor(af:AngularFireDatabase,
    private router: Router) {
    this.clicked = this.clicked === undefined ? false : true;
    this.years=af.list('/years/Akhilesh');
}

Here is the TypeScript code^

https://i.sstatic.net/AlGjc.jpg

angular typescript firebase firebase-realtime-database angularfire2

Answer 1

Answer №1

Your code is facing multiple issues that need attention.

Firstly, as you are transitioning from using a static array to fetching data from a database, it is essential to utilize an Observable and incorporate the | async pipe in your template.

(For illustration purposes, I will display JSON output in my sample code, but you should adjust it according to your actual object structure):

<div class="list-group" *ngFor="let year of years | async">
  {{ year | json }}
</div>

If you require more clarification on this concept, refer to this section of the Angular Tour of Heroes tutorial.

Furthermore, you need to modify the declaration of the years variable:

years: Observable<any>;

(It's recommended to follow Finnish Notation for naming Observables, although I have omitted it here to match your existing code).

If not already done, make sure to import the necessary module:

import { Observable } from 'rxjs';

Lastly, simply storing the AngularFireList object is insufficient; you must subscribe to the changes. You can use methods like snapshotChanges or valueChanges, depending on your requirements. (To access keys such as "1994", utilize year.key in your template and snapshotChanges).

this.years = af.list('/years/Akhilesh').snapshotChanges();

I suggest closely examining the example detailed in the AngularFire documentation.

Answer 2

Your code is facing multiple issues that need attention.

Firstly, as you are transitioning from using a static array to fetching data from a database, it is essential to utilize an Observable and incorporate the | async pipe in your template.

(For illustration purposes, I will display JSON output in my sample code, but you should adjust it according to your actual object structure):

<div class="list-group" *ngFor="let year of years | async">
  {{ year | json }}
</div>

If you require more clarification on this concept, refer to this section of the Angular Tour of Heroes tutorial.

Furthermore, you need to modify the declaration of the years variable:

years: Observable<any>;

(It's recommended to follow Finnish Notation for naming Observables, although I have omitted it here to match your existing code).

If not already done, make sure to import the necessary module:

import { Observable } from 'rxjs';

Lastly, simply storing the AngularFireList object is insufficient; you must subscribe to the changes. You can use methods like snapshotChanges or valueChanges, depending on your requirements. (To access keys such as "1994", utilize year.key in your template and snapshotChanges).

this.years = af.list('/years/Akhilesh').snapshotChanges();

I suggest closely examining the example detailed in the AngularFire documentation.

Retrieve and showcase information from Firebase using Angular

Answer №1

Similar questions

Starting a nested JSON structure with TypeScript and Angular 7

Implementing setDoc with Firebase-Admin using Typescript in Firestore

Tips for obtaining a redirect URL using Angular5

Angular utilizes ZoneAwarePromise rather than a plain String output

What is the best way to declare only a portion of a JavaScript module?

What are some techniques for breaking down or streamlining typescript code structures?

Unable to retrieve selected value from Flowbite-React Datepicker due to malfunctioning props change event

The process of upgrading all dependencies to a particular version

Learn how to iterate over a JSON object using TypeScript in Angular5 to generate an array of objects

The spinner failed to appear within 2000 milliseconds

Generating a fresh array based on the size of its existing elements is the key feature of the ForEach method

Encountered a runtime error while processing 400 requests

Display a Base64-encoded image within a row of an Ngx data table

Difficulty with Ionic: unable to compile for android

Guide to starting a Tizen Web App project using Angular

Unable to send JSON data from server to client following a successful file upload operation

Having trouble locating modules or properties with ANTLR4 TypeScript target?

Angular 2- Unable to bind to 'ngSwitchCase' as it is not recognized as a native property

Experiencing code coverage challenges in Angular 8 relating to function properties

Import statement cannot be used except within a module