Converting a Firebase object of objects into a JavaScript/Typescript array

Question

I'm using Firebase with an Ionic3 / Angular4 application.

The data in Firebase Realtime Database looks like this:

With the TS code below, I'm retrieving observable data from Firebase...

getDishesCategories(uid: string) {

    // 1. Fetch an observable AngularFire database snapshot

    const afDishCategoriesList$ = this.database.list<DishCategory>(`/users/${uid}/dishcategories/`).snapshotChanges()

    // 2. Map the AF list to 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$
}

This is giving me the following:

[{
    createdDate: "2018-12-14T15:59:25.345Z",
    dishes: { ozvawkfci1dadyuibgdy4: {name: "Dish 1", selected: true} },
    id: "default01",
    name: "All Dishes",
    selected: true,
    toggleDisabled: true
}]

The problem is that the 'dishes' data is still being received as JSON, with the Firebase key, and values as an object.

I'm trying to map the 'dishes' object of objects into a standard array, so I can call methods like .length() on it, and use indexes rather than keys.

This is what I'm trying for (dishes also 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 don't need the Firebase key here, just a bog standard zero indexed array, with each dish stored as an object at each index. Just can't visualise how to do this as I'm new to .map(), and I've been staring at it for hours now!

Could anyone help?

Thanks!

Answer 1

This is just a simple data transform in JavaScript. Iterate the properties of the object in dishes and build an array of just the values of those properties. Then overwrite the original property with that new array. For each object o in the array, something like this:

o.dishes = Object.keys(o.dishes).map(key => o.dishes[key])

If you're targeting newer versions of JavaScript, you could do this even easier with o.dishes = Object.values(o.dishes).