In my Ionic3 / Angular4 application, I am utilizing Firebase.
The structure of the data in Firebase Realtime Database is as follows:
Using the TypeScript code below, I am fetching observable data from Firebase...
getDishesCategories(uid: string) {
// 1. Retrieve an observable AngularFire database snapshot
const afDishCategoriesList$ = this.database.list<DishCategory>(`/users/${uid}/dishcategories/`).snapshotChanges()
// 2. Transform the AF list into an observable list of dish category objects
const dishCategoriesList$ = afDishCategoriesList$.pipe(map(changes => {
return changes.map(c => ({
...c.payload.val()
}))
}))
// 3. Return the observable list of dish objects
return dishCategoriesList$
}
The output received is as follows:
[{
createdDate: "2018-12-14T15:59:25.345Z",
dishes: { ozvawkfci1dadyuibgdy4: {name: "Dish 1", selected: true} },
id: "default01",
name: "All Dishes",
selected: true,
toggleDisabled: true
}]
The challenge lies in receiving the 'dishes' data in JSON format, with Firebase key and object values.
I aim to convert the 'dishes' object of objects into a standard array for easy manipulation using methods like .length() and index access.
Desired output (with 'dishes' mapped to an array):
[{
createdDate: "2018-12-14T15:59:25.345Z",
dishes: [{name: "Dish 1", selected: true}],
id: "default01",
name: "All Dishes",
selected: true,
toggleDisabled: true
}]
I am struggling to achieve this transformation as I am new to .map() and despite spending hours on it, I can't figure it out!
Seeking assistance from anyone familiar with this. Thank you!