I have a Firebase Provider set up and in my home page, I call the function in the provider to return an array of elements that match the KEYS that I get back from the Geofire query.
@Injectable()
export class FirebaseProvider {
finalData= [];
constructor(public afd: AngularFireDatabase) {}
getInformation(){
var firebaseRef = this.afd.app.database().ref().push();
var geoFire = new GeoFire(firebaseRef);
var listItems = this.afd.list('/listOfItems/');
listItems.subscribe(data =>{
data.forEach(item=>{
geoFire.set(item.$key, [item.latitude, item.longitude]).then(function() {
console.log("Provided key has been added to GeoFire");
}, function(error) {
console.log("Error: " + error);
});
})
})
var geoQuery = geoFire.query({
center: [37.79, -122.41],
radius: 10.5
});
let self = this;
return new Promise(resolve => {
geoQuery.on("key_entered", function(key, location, distance) {
var temp = self.afd.list('/listOfItems/' + key);
temp.subscribe(data =>{
self.finalData.push(data);
}
});
resolve(self.finalData);
})
}
and then in the page I want to show this information, I have the following:
load() {
this.dataToDisplay = this.firebaseProvider.getInformation();
}
When I try to see the data in dataToDisplay, it shows as this:
I’ve narrowed it down to the fact that perhaps the promise is returning the array too soon and that’s why this is happening. I’ve been trying over and over again to fix this but cannot figure out.
Thanks for your help in advance!!