使用 Angular 2(和 Ionic 2),我需要将不同的数组组合成一种主列表,以使前端能够轻松正确显示和操作所有数据。
换句话说,将正确的 ID 记录推送到新的 Users 数组中,其中包含部门和Custom_fields的名称或值。要合并的两个数组将由用户自定义,而不是标准化的。
初始服务器响应
{
"departments":[
{
"id":0,
"name":"Staff"
},
{
"id":1,
"name":"Sales"
},
{
"id":2,
"name":"Development"
}
],
"custom_fields":[
{
"id":1,
"name":"Company"
},
{
"id":2,
"name":"Job"
}
],
"users":[
{
"id":1,
"email":"email@domain.com",
"fname":"User",
"lname":"One",
"department":2,
"custom_fields":[
{
"id":1,
"value":"ABC Company"
},
{
"id":2,
"value":"Designer"
}
]
},
{
"id":2,
"email":"email2@domain.com",
"fname":"User",
"lname":"Two",
"department":3,
"custom_fields":[
{
"id":1,
"value":"ABC Company"
},
{
"id":2,
"value":"President"
}
]
}
]
}
潜在客户客户端示例
请注意添加的department_name和custom_fields.name。
"users":[
{
"id":1,
"email":"email@domain.com",
"fname":"User",
"lname":"One",
"department":2,
"department_name":"Development",
"custom_fields":[
{
"id":1,
"name":"Company",
"value":"ABC Company"
},
{
"id":2,
"name":"Job",
"value":"Designer"
}
]
},
{
"id":2,
"email":"email2@domain.com",
"fname":"User",
"lname":"Two",
"department":3,
"custom_fields":[
{
"id":1,
"name":"Company",
"value":"ABC Company"
},
{
"id":2,
"name":"Company",
"value":"President"
}
]
}
]
}
我正在使用 Ionic 3.0.1 和 Angular 4.0.0 通过 websocket 连接。服务器响应是一成不变的,但我对客户端的任何解决方案都完全开放。
这些记录是分开的,因此任何更新都可以在服务器的非常小的广播中完成,但因此增加了更多的工作客户端。
您可以使用 Array#map 与 Array#find 结合使用来构建数据
var json = {
"departments":[
{
"id":0,
"name":"Staff"
},
{
"id":1,
"name":"Sales"
},
{
"id":2,
"name":"Development"
}
],
"custom_fields":[
{
"id":1,
"name":"Company"
},
{
"id":2,
"name":"Job"
}
],
"users":[
{
"id":1,
"email":"email@domain.com",
"fname":"User",
"lname":"One",
"department":2,
"custom_fields":[
{
"id":1,
"value":"ABC Company"
},
{
"id":2,
"value":"Designer"
}
]
},
{
"id":2,
"email":"email2@domain.com",
"fname":"User",
"lname":"Two",
"department":3,
"custom_fields":[
{
"id":1,
"value":"ABC Company"
},
{
"id":2,
"value":"President"
}
]
}
]
};
var users = json.users;
users.map(user => {
var departmentName = json.departments.find(d => d.id == user.department);
if (departmentName) {
user.department_name = departmentName.name;
}
//Asume that custom_fields array are sorted by Id
user.custom_fields = user.custom_fields.map((custom, idx) => {
if (custom.id == json.custom_fields[idx].id) {
custom.name = json.custom_fields[idx].name;
}
return custom;
});
return user;
})
console.log(users);
你有没有看过/你能用下划线.js吗?
如果是这样,那么我将使用扩展函数:
extend_.extend(目的地,*来源) 复制 中的所有属性 将源对象转到目标对象,并返回 目标对象。它是按顺序排列的,因此最后一个源将覆盖 前面参数中同名的属性。
_.extend({name: 'moe'}, {age: 50});
=> {name: 'moe', age: 50}
在您的情况下,如果第一个 JSON 块存储在 arrayOne 中,第二个 JSON 块存储在 arrayTwo 中,那么您可以执行以下操作(假设更改的数据始终位于 arrayOne.users 中,并且第二个数组始终只是嵌套的用户对象。
public arrayMerge = _.extend(this.arrayOne.users, this.arrayTwo);
我刚刚做了一个快速测试,看起来它合并正确,但是有一点额外的弹片,我不确定这是否与您的数据重叠有关,或者我在连接测试夹具时所做的工作。
如果下划线.js是一个选项,则可能会满足您的需求。(我在我的 Angular2 项目中使用它,所以如果您在集成它时遇到任何问题,请告诉我)。