How to store data from firebaselistobservable to an array?

Question

I'm trying to copy the data from firebase to an array using angular 2. But i'm unable to push the data into the array.

Here's the code:

Variables:

uid: string = '';
agencyItems: FirebaseListObservable<any[]>;
trackerItems: FirebaseListObservable<any[]>;
agencyID: any[] = [];

getData()

this.af.auth.subscribe(auth => {
        if (auth) {
            this.uid = auth.auth.uid;
        }
    });

    this.getAgencyData();

    console.log("AgentID: ",this.agencyID);   
    console.log("Array Length = ",this.agencyID.length);  //PROBLEM HERE: Array agencyID is still 0.

    this.getTrackerData();

getAgencyData():

console.log("Fetching agency data");
    this.agencyItems = this.af.database.list('/agencies/',{preserveSnapshot:true});
    this.agencyItems.subscribe(snapshots => {
        snapshots.forEach(snapshot => {
            console.log(snapshot.val()._id);
            this.agencyID.push(snapshot.val()._id);
        });
    });

getTrackerData():

for (let i = 0; i < this.agencyID.length; i++)     
    {
        console.log("Fetching Tracker data");
        this.trackerItems = this.af.database.list('/tracker/' + this.agencyID[i]);
        this.trackerItems.subscribe(trackerItems => trackerItems.forEach(Titem =>
            console.log("Tracker name: " + Titem.name),
        ));
    }

Here is the debug console screenshot:

Since i'm a newbie to web programming some code may seem completely unnecessary.

What am I doing wrong in this code? How can I implement the same.

alex kucksdorf · Accepted Answer · 2017-02-09 10:43:23Z

4

The problem is the location where, or better WHEN, you are checking the length of the array. You make an asynchronous call when you fetch the data, but you are checking the length of the array before the data has been returned. Therefore the array is still empty.

Try the following in getAgencyData():

console.log("Fetching agency data");
this.agencyItems = this.af.database.list('/agencies/',{preserveSnapshot:true});
this.agencyItems.subscribe(snapshots => {
    snapshots.forEach(snapshot => {
        console.log(snapshot.val()._id);
        this.agencyID.push(snapshot.val()._id);
        console.log("Array Length = ",this.agencyID.length); // See the length of the array growing ;)
    });
    // EDIT
    this.getTrackerData();
});

edited Feb 9, 2017 at 10:43

answered Feb 9, 2017 at 10:21

alex kucksdorf

2,6631 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Rodney Mathew Over a year ago

So how do I wait until the data is completely fetched?

alex kucksdorf Over a year ago

The data will be completely fetched at the end of your .subscribe() block. However, without knowing what you want to do with the length of the array or the data itself, it's hard to tell you the best approach or location.

Rodney Mathew Over a year ago

I just want to store all the 'arriving' data into an array.

alex kucksdorf Over a year ago

But I think you already achieved that? Your console output clearly shows that your array contains the fetched data.

alex kucksdorf Over a year ago

No, it's not. In your method getTrackerData() you dispatch an asynchronous call. That is the block you pass into .subscribe(). Your method is finished at this moment. However, only after the data from your request arrives the block will be executed and your array will be updated. That means, usually the block from .subscribe() will be executed AFTER your method has finished.

|

Collectives™ on Stack Overflow

How to store data from firebaselistobservable to an array?

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related