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

Question

我将 Firebase 与 Ionic3 / Angular4 应用程序一起使用。

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
}]

问题是“菜肴”数据仍以 JSON 形式接收，Firebase 键和值作为对象。

我正在尝试将对象的“菜肴”对象映射到标准数组中，因此我可以在其上调用 .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) 更轻松地做到这一点。