javascript - Ionic 3 - 如何使用 valueChanges Observable 合并对象数组
问题描述
我有两个对象数组来合并它们。第一个是 snapshotChanges 检索的结果(参与者),第二个是 valueChanges 检索的结果(usersRoom)。
//First one (participants)
participants = [
{id: 123, message: 'OK'},
{id: 456, message: 'Hey'}
];
//Second one (usersRoom)
for(var i=0; i < this.participants.length; i++){
this.room = this.db.object('users/' + this.participants[i].id).valueChanges();
this.room.subscribe(
res => {
this.usersRoom.push(res);
});
}
但是当我尝试合并它们时,使用下面的代码,这将返回一个空数组:
this.final = this.usersRoom.reduce((arr, e) => {
arr.push(Object.assign({}, e, this.participants.find(a => a.id === e.id)))
return arr;
}, [])
我检查了我是否创建了一个假对象而不是获取 valueChanges,只是为了验证运行上述合并的代码,并且运行良好。
当我在结果中运行 console.log 时,我注意到它们在控制台上以不同的方式出现(请参阅每个的第一行):
//participants
(2) [{…}, {…}]
0: {id: "123", message: "OK"}
1: {id: "456", message: "Hey"}
//usersRoom
[]
0: {name: "John", age: "28", id: "123"}
1: {name: "Mary", age: "32", id: "456"}
在我看来,两者的格式不同,所以它们最终没有被合并。那么我该怎么做才能合并它们呢?
解决方案
如果我理解正确,你正试图得到这个
merge(){
let ids = [];
let merge_obj = [];
let participants = [
{id: 123, message: 'OK'},
{id: 456, message: 'Hey'}
];
let usersRoom = [
{name: "John", age: "28", id: "123"},
{name: "Mary", age: "32", id: "456"}
];
participants.map( (obj) => {
let index = ids.indexOf(obj.id);
if( !( index > -1 ) )
{
ids.push(obj.id.toString());
}
});
usersRoom.map( (obj) => {
let index = ids.indexOf(obj.id);
if( !(index > -1 ) )
{
merge_obj.push(obj);
}
else
{
let keys : Array<string> = Object.keys( obj );
let objMerge = participants.filter( o => {
if( o.id.toString() == obj.id )
{
let keysMerge : Array<string> = Object.keys( o );
keysMerge.forEach( value => {
if ( keys.indexOf(value) == -1 ) {
obj[value]=o[value];
}
});
}
return obj;
})
merge_obj.push(obj);
}
});
console.log(merge_obj);
}
合并对象
0: {name: "John", age: "28", id: "123", message: "OK"}
1: {name: "Mary", age: "32", id: "456", message: "Hey"}
推荐阅读
- javascript - 页面上多个视频的显示持续时间
- java - Java 2D - 多缓冲区不可用
- docker - Docker 容器无法连接到互联网
- php - Magento 2:订单确认电子邮件中的自定义产品属性
- javascript - Vue.js 3:当 `data()` 转换为 `setup()` 时,`v-model` 失去响应性
- java - 使用列表映射对象
> - reactjs - 在 HashRouter 中将状态从 Link 传递到 Route
- python - 查找两个列表中不包含公共字符的所有字符串对
- javascript - 如何为多个按钮制作全局功能(javascript)
- node.js - navigator.mediaDevices.getUserMedia 仅与 localhost 一起使用。它不适用于 ip 地址