Angularfire2 retrieve list of data with a specified number of items from the

Question

Angularfire2 retrieve list of data with a specified number of items from the

I am facing a challenge in retrieving a specific node from my firebase database.

https://i.sstatic.net/YDevB.png

The technologies I am using include:

"angularfire2": "^5.0.0-rc.4",
"firebase": "^4.9.0",

In my component code, you can find the following lines :

  this.id = this.route.snapshot.paramMap.get('id'); 
  auth.appUser$.subscribe(appUser => this.appUser = appUser );  

  if (this.id) 
  {
      //Live game state info          
      this.subscription = this.gameService.getLive(this.id).subscribe(action => {
        this.game = action.payload.val(); 
        console.log(this.game);
      });
    }
}

The function called in my gameService is structured as follows :

 getLive(gameId) 
  {
    return this.db.object('/games/live/' + gameId).snapshotChanges();
  }

The current obstacle I am facing is when trying to access the "StartedAt" node within the rounds. Even though I have a complete view of the "game" node, accessing "startedAt" from a specific round is proving challenging.

https://i.sstatic.net/t9Bza.png

If anyone has insights on how to successfully retrieve the "startedAt" data from a specific round, your input would be greatly appreciated!

angular typescript firebase firebase-realtime-database angularfire2

Answer 1

Answer №1

game.rounds[roundId].startedAt

Answer 2

game.rounds[roundId].startedAt

Answer 3

Answer №2

Component :

      Upon subscribing to the game service's live updates for a specific ID, the component sets the game object based on the received action. It then manipulates the playerList by converting it to an array of values.

The rounds in the game are also converted into an array of values.

        The console logs the last round in the game's rounds array before completing the subscription.
      });
    }

Game model :

import { Round } from './round';
import { Player } from './player';

export interface Game {
 key: string,
 value:{
 state: string, 
 playerList: Player[], 
 rounds: Round[], 
 startedAt: string,
 roundCounter: string,
       }
}

Answer 4

Component :

      Upon subscribing to the game service's live updates for a specific ID, the component sets the game object based on the received action. It then manipulates the playerList by converting it to an array of values.

The rounds in the game are also converted into an array of values.

        The console logs the last round in the game's rounds array before completing the subscription.
      });
    }

Game model :

import { Round } from './round';
import { Player } from './player';

export interface Game {
 key: string,
 value:{
 state: string, 
 playerList: Player[], 
 rounds: Round[], 
 startedAt: string,
 roundCounter: string,
       }
}

Angularfire2 retrieve list of data with a specified number of items from the

Answer №1

Answer №2

Similar questions

What is the best way to increase the height of an image beyond the limits of its container, causing it to overlap with other elements

Dynamically assigning column values based on object properties

Efficient ways to fetch multiple Firestore collections in a single field using React Native

Having trouble resolving modules after generating tsconfig.json?

Cannot find property '' within type 'never'. (Using TypeScript useState with mapped JSON data from a server)

Namespace remains ambiguous following compilation

Steps for confirming whether each element in the array includes the specified search string using Typescript and protractor

Navigating through an Angular 2 service

Using Express middleware in a TypeScript Express application

The object 'key' is not a valid property of the type 'Event'

Setting up jsonServer in gulp with typescript: A guide

Angular - Organize an array of Objects in alphabetical order

Failure to invoke Jest Spy

Slim API receives a request from Ionic 5

Sundays and last days are excluding React-big-calendar and dayjs longer events from being displayed

Ways to effectively utilize the $getDownloadURL() promise within the ng-repeat directive in Angularjs 1.6

Importing TypeScript modules dynamically can be achieved without the need for Promises

"Exploring the process of connecting a `mat-select` element with dynamically changing data

Transforming an ordinary JavaScript object into a class instance

Leveraging the power of the 'var' keyword in JavaScript when