Hey there, I'm currently working on developing a leaderboard feature for an app. The idea is that users will be able to store their "points" in a Firebase database, linked to their unique user ID.
This is how the data is structured in JSON format:
- users
- hJfEgXkyaKPckchL3kx8rpZ58Ew2
-LV6c8E5rRD4_mQqsb6Q
- name: "Lin Manuel Miranda"
- points: 120
- mlIBrdjT8CfIURQEAhLFPzzUFQg1
-LV7I6d8LeuWFLH5MRKy
- name: "Emily Blunt"
- points: 200The user IDs "mlIBrdjT8CfIURQEAhLFPzzUFQg1" and "hJfEgXkyaKPckchL3kx8rpZ58Ew2" are connected to their corresponding points stored in the database.
My current challenge is figuring out how to retrieve and display the list of users' points in ascending order. Any suggestions on how to modify the code to achieve this?
Below are snippets from my .ts and .html files:
import { Component } from '@angular/core';
// firebase imports
import * as firebase from 'firebase';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { User } from 'src/models/login.interface';
import { Observable } from 'rxjs';
import { reference } from '@angular/core/src/render3';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
users: Observable<any>;
constructor(
private db: AngularFireDatabase
) {
this.users = this.db.list('/users/').valueChanges();
const usersRef = firebase.database().ref('/users/');
const ref = usersRef.orderByKey();
ref.once('value').then(function(snap) {
snap.forEach(function (childSnap) {
const pkey = childSnap.key;
console.log(pkey);
});
});
}
}<ion-content>
<div class="cards" *ngFor="let user of users | async">
<ion-card>
<ion-card-header>
<ion-card-title>{{user.name}}</ion-card-title>
<ion-card-subtitle id ="points">{{user.points}}</ion-card-subtitle>
</ion-card-header>
</ion-card>
</div>
</ion-content>Currently, the .ts file is returning the user IDs instead of the points. Any guidance on how to tackle this issue would be highly appreciated. Thank you in advance!