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^

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

Using a Typescript enum as a parameter type can lead to accepting incorrect values

Modify the code to use a BehaviorSubject subscribing to an Observable

The function column.getHeaderGroupProps does not seem to be available

Displayed even when data is present, the PrimeNg empty message persists

Modifying the onclick event of a button: A guide

React with Typescript: It appears that you are attempting to utilize Typescript without having it properly installed on your system

Safari is currently experiencing issues with running the Angular 11 application

Encountering a problem in Angular 2 when initiating a project

Tips for waiting for an Http response in TypeScript with Angular 5

Incorporate TypeScript with Angular 2 to construct a dictionary with <key, value> pairs. Then, utilize a JSON file to populate the dictionary with data

I want to know the best way to send latitude and longitude coordinates from an external source in order to generate a

Uncertain about where and how to properly register a service in Angular 2

Ionic 3 is unable to find a provider for CallNumber

Leveraging the 'styled()' utility from the MUI System while incorporating extra properties (Typescript)

The function jquery__WEBPACK_IMPORTED_MODULE_4__.hubConnection is not recognized

Issue: The function react.useState is either not defined or its output is not iterable

Transforming the string attribute of an object within a JavaScript array through mapping

How would you define 'Idiomatic' in the context of Idiomatic Javascript?

How to use SASS mixins in Angular 5 components

Troubleshooting issue with Vue Class Component and Vuex-class causing ESLint error