遍历两个对象数组，比较具有相同ID的数据

Question

const agents =[
{
"identifier": "28c6acec-9ee0-11e7-b66c-3cb9f33ef190",
"firstName": "John",
"lastName": "Doe",
"email": "[e-mail]",
"photo": "https://via.placeholder.com/300/3366FF/FFFFFF?text=John.Doe"
},
{
"identifier": "beb04834-9f8b-11e7-9469-8a39b455b609",
"firstName": "John",
"lastName": "Bob",
"email": "[e-mail]",
"photo": "https://via.placeholder.com/300/7EE833/333333?text=John.Bob"
},
{
"identifier": "8273f480-a28b-11e7-b106-e7aa9bbee08e",
"firstName": "Rose",
"lastName": "Patterson",
"email": "[e-mail]",
"photo": "https://via.placeholder.com/300/FF805D/333333?text=Rose.Patterson"
},
{
"identifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"firstName": "Abraham",
"lastName": "Ellis",
"email": "[e-mail]",
"photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Rose.Patterson"
},
{
"identifier": "e512594e-a34c-11e7-a6cb-0609e42722e2",
"firstName": "Joel",
"lastName": "Wagner",
"email": "[e-mail]",
"photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Joel.Wagner"
},
{
"identifier": "9644e296-a8f1-11e7-b7d2-36bd3f24901a",
"firstName": "Wilfred",
"lastName": "Anderson",
"email": "[e-mail]",
"photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Wilfred.Anderson"
},
{
"identifier": "2900c694-a8f3-11e7-b119-b7844b927e5c",
"firstName": "Delbert",
"lastName": "Pena",
"email": "[e-mail]",
"photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Delbert.Pena"
},
{
"identifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"firstName": "Madeline",
"lastName": "Lee",
"email": "[e-mail]",
"photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Madeline.Lee"
},
{
"identifier": "e86b789e-a8f3-11e7-b549-b60535cbd9d7",
"firstName": "Morris",
"lastName": "Chambers",
"email": "[e-mail]",
"photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Morris.Chambers"
},
{
"identifier": "2d28a260-a8f7-11e7-953a-4894ae2813ba",
"firstName": "Albert",
"lastName": "Roy",
"email": "[e-mail]",
"photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Albert.Roy"
}
]

const logs = [
{
"identifier": "f53b3e0e-6a21-11eb-9439-0242ac130002",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "[phone]",
"dateTime": "2020-10-05T14:48:00.000Z",
"duration": 230
},
{
"identifier": "2c97e1b2-6a23-11eb-9439-0242ac130002",
"agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"number": "[phone]",
"dateTime": "2020-01-10T18:50:00.000Z",
"duration": 71
},
{
"identifier": "32cf8544-6a23-11eb-9439-0242ac130002",
"agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"number": "[phone]",
"dateTime": "2020-01-11T10:50:00.000Z",
"duration": 286
},
{
"identifier": "35dcfac8-6a23-11eb-9439-0242ac130002",
"agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"number": "[phone]",
"dateTime": "2020-01-12T11:50:00.000Z",
"duration": 286
},
{
"identifier": "39dfda28-6a23-11eb-9439-0242ac130002",
"agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"number": "[phone]",
"dateTime": "2020-02-01T15:50:00.000Z",
"duration": 269
},
{
"identifier": "3d35d808-6a23-11eb-9439-0242ac130002",
"agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"number": "[phone]",
"dateTime": "2020-02-02T16:50:00.000Z",
"duration": 8
},
{
"identifier": "4104b274-6a23-11eb-9439-0242ac130002",
"agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"number": "[phone]",
"dateTime": "2020-02-03T17:50:00.000Z",
"duration": 249
},
{
"identifier": "9e905d3e-0884-4d38-8195-c5b73278876d",
"agentIdentifier": "2900c694-a8f3-11e7-b119-b7844b927e5c",
"number": "[phone]",
"dateTime": "2020-09-01T12:50:00.000Z",
"duration": 170
},
{
"identifier": "730f0d87-030f-4d8d-b1de-686144ad8d73",
"agentIdentifier": "e86b789e-a8f3-11e7-b549-b60535cbd9d7",
"number": "[phone]",
"dateTime": "2020-09-01T13:50:00.000Z",
"duration": 247
},
{
"identifier": "2d28a260-a8f7-11e7-953a-4894ae2813ba",
"agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
"number": "[phone]",
"dateTime": "2020-09-01T14:50:00.000Z",
"duration": 254
},
{
"identifier": "b84874bf-ea9c-4b85-a6dd-f0098ec84d25",
"agentIdentifier": "8273f480-a28b-11e7-b106-e7aa9bbee08e",
"number": "[phone]",
"dateTime": "2020-08-09T12:50:00.000Z",
"duration": 56
},
{
"identifier": "8d06b645-5135-4689-891b-ccc4cab886b7",
"agentIdentifier": "8273f480-a28b-11e7-b106-e7aa9bbee08e",
"number": "[phone]",
"dateTime": "2020-08-10T10:50:00.000Z",
"duration": 67
},
{
"identifier": "c93e2611-3a35-4820-9e0d-6bc7bd764118",
"agentIdentifier": "8273f480-a28b-11e7-b106-e7aa9bbee08e",
"number": "[phone]",
"dateTime": "2020-08-11T15:50:00.000Z",
"duration": 37
},
{
"identifier": "9c5c0175-2ef7-4307-ab91-87cc1abfa235",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "[phone]",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 16
},
{
"identifier": "5ec271b1-d89c-4c5f-a552-e5d66562851a",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "[phone]",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 118
},
{
"identifier": "634ee4b1-d492-4f36-8114-f0e98fd63efe",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "[phone]",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 63
},
{
"identifier": "82f96e9e-0591-471f-8d79-0a0cb243e7e1",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "[phone]",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 205
},
{
"identifier": "1388b62e-3390-4dce-8f29-2dd714905f44",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "[phone]",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 75
},
{
"identifier": "38dead49-68de-4332-9089-4c4f519b460f",
"agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
"number": "[phone]",
"dateTime": "2020-10-07T14:50:00.000Z",
"duration": 122
}
]

在这两个数组中，AgentIdentifier(日志数组)和Identifier(代理)具有相同的值。

我试图使用日志数组中的agentIdentifier从代理数组中获取信息，在这种情况下将是firstName。

这是我尝试过的，但它给了我未定义。

<div>
{logs.map((item) => (item.agentIdentifier === agents.map((agent) => (agent.identifier)) agent.firstName : "no name found"))}
</div>

任何帮助或指导将不胜感激。

Answer 1

首先整理列表，然后可以使用修改后的对象更新DOM:

const collatedLogs = logs.map(log => ({
...log,
agent: agents.find(agent =>
agent.identifier === log.agentIdentifier),
}));