如何解决我们如何比较两个对象数组并显示两个数组中的项目
我有两个数组,比如
const arr1=[{id:0,name:'aa',userId:'22,23'},{id:1,name:'bb',userId:'23'}]
const arr2=
[{id:22,username:'Peter'},{id:23,username:'John'}]
arr1.map((val,k)=><div>
<p>val.userId</p>
</div>
我得到的输出为
22,23
23
如何获得类似的输出
Peter,John
John
解决方法
您可以使用 find()
从 arr2 获取用户名
const arr1 = [
{ id: 0,name: "aa",userId: "22,23" },{ id: 1,name: "bb",userId: "23" },];
const arr2 = [
{ id: 22,username: "Peter" },{ id: 23,username: "John" },];
const output = arr1.map(o =>
o.userId
.split(",")
.map(x => arr2.find(k => k.id === Number(x)).username)
.join(",")
);
output.map((val)=> <div><p>val</p></div>);
{arr1.map((val,k) => {
const ids = val.userId.split(",");
return ids.map((id) => {
const user = arr2.find((user) => user.id === Number(id));
return (
<div key={`${val.id}-${user.id}`}>
<p>{user.username}</p>
</div>
);
});
})}
,
您可以使用 Array#reduce
和 Array#map
-
Array#reduce
将数组转换为对象以便于查找。 它比在地图中使用find
更好 - 然后
Array#map
更新users
的新密钥。它会携带用户名
const arr1=[{id:0,name:'aa',userId:'22,23'},{id:1,name:'bb',userId:'23'}]
const arr2= [{id:22,username:'Peter'},{id:23,username:'John'}]
const obj = arr2.reduce((acc,{id,username})=>(acc[id]=username,acc),{})
const res = arr1.map(({userId,...a})=>{
const users = userId.split(',').map(id=> obj[id]).join(',')
return ({...a,userId,users})
})
console.log(res)
res.map((val,k)=><div>
<p>val.users</p>
</div>)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。