如何将firebase对象的属性列为数组？

Question

我有一个具有以下结构的firebase数据库：

这些随机UID中的每一个都有creator和roomName。我正在尝试在数组中显示所有roomName，例如["Holy Robert Louis Stevenson", "Holy Sardine", "Holy Gunpowder"]，但它始终显示为[Object, Object, Object]

这是我的代码：

const dbRef = firebase.initializeApp(config).database().ref().child('rooms');
...
  componentDidMount(){
    dbRef.on('value', snap => {
      console.log(snap.val());
      console.log('firebaseHolyArray: ', Object.values(snap.val()));
    });
  }

我试过console.log('firebaseHolyArray: ', Object.values(snap.val())["roomName"]);，但显示未定义。如何以数组格式显示roomName的值？

Answer 1

您可以使用forEach() method，这将从Firebase数据生成正确排序的列表：

dbRef.on('value', snap =>  {
   var data = [];
   snap.forEach(ss => {
      data.push(ss.child('name').val());
   });
   console.log(data);
});

不需要使用Object.values（）或使用下划线进行多次迭代，这两种情况都可能会产生无序数据和其他复杂问题。

另外，理想情况下，您应养成使用recommended practices处理列表的习惯，例如child_added。

Answer 2

export const mapObjectToArray = (obj: any) => {
    const mappedDatas = [];
    for (const key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            mappedDatas.push({ ...obj[key], id: key });
        }
    }
    return mappedDatas;
};

这是我用来在数组中转换Firebase对象的函数。

Answer 3

我认为snap.val()正在返回这样的内容：

{
  "-KeoiS8luCsuKhzc_Eut": { "creator": "Robin", "roomName": "Holy Robert Louis Stevenson" },
  "-Keol-2Si05dmkmuac8l": { "creator": "Robin", "roomName": "Holy Sardine" },
  "-KeooOxSoYNdNk6g5DMw": { "creator": "Robin", "roomName": "Holy Gunpowder" }
}

我们可以使用Object.values(snap.val())将其转换为对象数组，如下所示：

[
  { "creator": "Robin", "roomName": "Holy Robert Louis Stevenson" },
  { "creator": "Robin", "roomName": "Holy Sardine" },
  { "creator": "Robin", "roomName": "Holy Gunpowder" }
]

然后，我们想从每个对象中提取房间名称。在这种情况下，数组map方法有助于将对象转换为我们想要的对象。最后，我认为它应该是这样的：

var rooms = Object.values(snap.val()).map(function(obj) {
  return obj.roomName;
});
console.log('firebaseHolyArray: ', rooms);

这将获取对象数组，并将每个对象传递给我们的函数。在该函数中，您可以返回想要最终得到的对象的哪个部分......在这种情况下，roomName。您将留下一系列这些，您可以轻松打印出来。

Answer 4

Object.values（）返回Object []。

所以，它并没有包括＆＃34; roomName＆＃34;属性。

我认为您使用map进行采摘。

这是代码

console.log('firebaseHolyArray: ', Object.values(snap.val()).map((v) => v.roomName);

如果使用下划线，也可以使用underscore.pluck。

console.log('firebaseHolyArray: ', _.pluck(Object.values(snap.val()), "roomName"));

请参阅http://underscorejs.org/#pluck