Ad
Display Data From Promise Firebase
I have a service like this
async getBirthdays() {
const user = await this.authSP.getUserInfo();
let bdays = [];
return await new Promise<any>((resolve) => {
this.angularFire.database.ref("birthdays").orderByChild("creator_user_id").equalTo(user.uid).once("value", (snapshot) => {
snapshot.forEach(function (childSnapshot) {
const value = childSnapshot.val();
value.$key = childSnapshot.key;
bdays.push(value);
});
});
resolve(bdays);
});
}
This promise return this array of objects
In my component i just try to display avatar value :
this.birthdays = await this.birthdaySP.getBirthdays().then(res => {
var data = res.map(t=>t.avatar);
console.log(data);
});
But console.log(data) return an empty array.
Any help is apreciated
Ad
Answer
Right now you call resolve(bdays)
before the once()
callback has run, which means that bdays
is just an empty array.
The call to resolve()
needs to be inside the callback for bdays
to contain the data:
async getBirthdays() {
const user = await this.authSP.getUserInfo();
let bdays = [];
return await new Promise<any>((resolve) => {
this.angularFire.database.ref("birthdays").orderByChild("creator_user_id").equalTo(user.uid).once("value", (snapshot) => {
snapshot.forEach(function (childSnapshot) {
const value = childSnapshot.val();
value.$key = childSnapshot.key;
bdays.push(value);
});
resolve(bdays);
});
});
}
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad