CODEWITHSUNDEEP
arraysangulartypescriptfirebasefirebase-realtime-database
Code Ratchet
Code Ratchet

Reputation: 6029

Return Array from Firebase snapshot method

I'm connecting to Firebase and retrieving data from a given location, what I'm trying to do is loop through the snapshot.val() build and Array, return the Array and then loop through it on the component.html and build a Dropdown.

At present I'm having difficulty figuring out the syntax for such service method, this is my current code. - This is called from app.component.ts within ngOnInit()

getExerciseOptions(): Array<Exercise> {

    const items: Exercise[] = [];

    this.exerciseDbRef2.on("value", (snapshot) => {

        snapshot.forEach((snap) => {
            items.push({
                id: snap.key,
                description: snap.val().description
            });
            return false;

        });
    });
}

So this.exerciseDbRef2 points to the table within Firebase as shown here: 

private exerciseDbRef2 = this.fire.database.ref('/exercise_description');

The error I'm currently receiving is 

A function whose declared type is neither 'void' nor 'any' must return a value.

Which I understand, so when I change return false to return items the new error is:

Argument of type '(snap: DataSnapshot) => Exercise[]' is not assignable to parameter of type '(a: DataSnapshot) => boolean'.
Type 'Exercise[]' is not assignable to type 'boolean'.

I have looked at using child_added but from my understanding this will be called every time a new child has been added into that location, which is not what I'm looking for. The children in this location will not change nor will any be added. - Maybe I've misinterpreted 'child_added' ?

I'm rather new to Firebase so I'm at the beginning on the learning curve so please bare with, I would also like to mention if the way I'm currently doing this is not correct then please bring it to my attention.

So for clarification : Connect to Firebase, retrieve all children from given location i.e exercise_description table, loop through the snapshot, build an Array and return it.

Then on the component loop through the Array and build the Dropdown.

Can someone please explain how I go about returning the Array based off the snapshot.val() ?

Upvotes: 1

Views: 2281

Answers (1)

cartant
cartant

Reputation: 58400

You cannot return an array from getExerciseOptions, as the value event is asynchronous.

However, you could return a promise:

getExerciseOptions(): Promise<Array<Exercise>> {
    return this.exerciseDbRef2
      .once("value")
      .then(snapshot => {
        const exercises: Exercise[] = [];
        snapshot.forEach(snap => {
            exercises.push({
                id: snap.key,
                description: snap.val().description
            });
            return false;
        });
        return exercises;
    });
}

You would then call it like this:

getExerciseOptions().then(exercises => console.log(exercises));

If you are unfamiliar with promises, you might want to read JavaScript Promises: an Introduction.

Upvotes: 3

Related Questions