使用Angular 2(和Ionic 2),我需要将不同的数组组合成一种主列表,以使前端易于正确显示和处理所有数据。
换句话说,将正确的ID记录推送到具有Departments和Custom_fields中的名称或值的新Users数组中。将要合并的两个阵列将由用户自定义,而不是标准化的。
初始服务器响应
{
"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);