将对象的 Firebase 对象转换为 JavaScript/Typescript 数组

Question

我在 Ionic3 / Angular4 应用程序中使用 Firebase。

Firebase 实时数据库中的数据如下所示：

使用下面的 TS 代码，我正在从 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$
}

这给了我以下信息：

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

问题是 'dishes' 数据仍作为 JSON 接收，使用 Firebase 键和值作为对象。

我正在尝试将对象的 'dishes' 对象映射到标准数组中，这样我就可以在其上调用 .length() 之类的方法，并使用索引而不是键。

这就是我正在尝试的（菜肴也映射到一个数组）：

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

我这里不需要 Firebase 键，只需要一个沼泽标准零索引数组，每道菜在每个索引处都存储为一个对象。由于我是 .map() 的新手，所以无法想象如何做到这一点，我已经盯着它看了好几个小时了！

有人能帮忙吗？

谢谢！

Answer 1

这只是 JavaScript 中的一个简单数据转换。 Iterate the properties of the object in dishes 并构建一个仅包含这些属性值的数组。然后用那个新数组覆盖原来的属性。对于数组中的每个对象 o，如下所示：

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

如果您的目标是更新版本的 JavaScript，您可以使用 o.dishes = Object.values(o.dishes) 更轻松地完成此操作。

将对象的 Firebase 对象转换为 JavaScript/Typescript 数组

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

javascript

json

firebase

angularfire

firebase-realtime-database