Iterating over two arrays of objects and comparing data with same ID

Question

const agents =[
  {
    "identifier": "28c6acec-9ee0-11e7-b66c-3cb9f33ef190",
    "firstName": "John",
    "lastName": "Doe",
    "email": "Johndoe@callcenter.xyz",
    "photo": "https://via.placeholder.com/300/3366FF/FFFFFF?text=John.Doe"
  },
  {
    "identifier": "beb04834-9f8b-11e7-9469-8a39b455b609",
    "firstName": "John",
    "lastName": "Bob",
    "email": "JohnBob@callcenter.xyz",
    "photo": "https://via.placeholder.com/300/7EE833/333333?text=John.Bob"
  },
  {
    "identifier": "8273f480-a28b-11e7-b106-e7aa9bbee08e",
    "firstName": "Rose",
    "lastName": "Patterson",
    "email": "RosePatterson@callcenter.xyz",
    "photo": "https://via.placeholder.com/300/FF805D/333333?text=Rose.Patterson"
  },
  {
    "identifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
    "firstName": "Abraham",
    "lastName": "Ellis",
    "email": "Abraham.Ellis@callcenter.xyz",
    "photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Rose.Patterson"
  },
  {
    "identifier": "e512594e-a34c-11e7-a6cb-0609e42722e2",
    "firstName": "Joel",
    "lastName": "Wagner",
    "email": "Joel.Wagner@callcenter.xyz",
    "photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Joel.Wagner"
  },
  {
    "identifier": "9644e296-a8f1-11e7-b7d2-36bd3f24901a",
    "firstName": "Wilfred",
    "lastName": "Anderson",
    "email": "Wilfred.Anderson@callcenter.xyz",
    "photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Wilfred.Anderson"
  },
  {
    "identifier": "2900c694-a8f3-11e7-b119-b7844b927e5c",
    "firstName": "Delbert",
    "lastName": "Pena",
    "email": "Delbert.Pena@callcenter.xyz",
    "photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Delbert.Pena"
  },
  {
    "identifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
    "firstName": "Madeline",
    "lastName": "Lee",
    "email": "Madeline.Lee@callcenter.xyz",
    "photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Madeline.Lee"
  },
  {
    "identifier": "e86b789e-a8f3-11e7-b549-b60535cbd9d7",
    "firstName": "Morris",
    "lastName": "Chambers",
    "email": "Morris.Chambers@callcenter.xyz",
    "photo": "https://via.placeholder.com/300/E241BC/FFFFFF?text=Morris.Chambers"
  },
  {
    "identifier": "2d28a260-a8f7-11e7-953a-4894ae2813ba",
    "firstName": "Albert",
    "lastName": "Roy",
    "email": "Albert.Roy@callcenter.xyz",
    "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": "+49151484522",
    "dateTime": "2020-10-05T14:48:00.000Z",
    "duration": 230
  },
  {
    "identifier": "2c97e1b2-6a23-11eb-9439-0242ac130002",
    "agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
    "number": "+49151783331",
    "dateTime": "2020-01-10T18:50:00.000Z",
    "duration": 71
  },
  {
    "identifier": "32cf8544-6a23-11eb-9439-0242ac130002",
    "agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
    "number": "+49151783331",
    "dateTime": "2020-01-11T10:50:00.000Z",
    "duration": 286
  },
  {
    "identifier": "35dcfac8-6a23-11eb-9439-0242ac130002",
    "agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
    "number": "+49151783331",
    "dateTime": "2020-01-12T11:50:00.000Z",
    "duration": 286
  },
  {
    "identifier": "39dfda28-6a23-11eb-9439-0242ac130002",
    "agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
    "number": "+49151514231",
    "dateTime": "2020-02-01T15:50:00.000Z",
    "duration": 269
  },
  {
    "identifier": "3d35d808-6a23-11eb-9439-0242ac130002",
    "agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
    "number": "+49151514231",
    "dateTime": "2020-02-02T16:50:00.000Z",
    "duration": 8
  },
  {
    "identifier": "4104b274-6a23-11eb-9439-0242ac130002",
    "agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
    "number": "+49151514231",
    "dateTime": "2020-02-03T17:50:00.000Z",
    "duration": 249
  },
  {
    "identifier": "9e905d3e-0884-4d38-8195-c5b73278876d",
    "agentIdentifier": "2900c694-a8f3-11e7-b119-b7844b927e5c",
    "number": "+49221514231",
    "dateTime": "2020-09-01T12:50:00.000Z",
    "duration": 170
  },
  {
    "identifier": "730f0d87-030f-4d8d-b1de-686144ad8d73",
    "agentIdentifier": "e86b789e-a8f3-11e7-b549-b60535cbd9d7",
    "number": "+49221514231",
    "dateTime": "2020-09-01T13:50:00.000Z",
    "duration": 247
  },
  {
    "identifier": "2d28a260-a8f7-11e7-953a-4894ae2813ba",
    "agentIdentifier": "6fe55f02-a8f3-11e7-b037-c33c31bca71f",
    "number": "+49221514231",
    "dateTime": "2020-09-01T14:50:00.000Z",
    "duration": 254
  },
  {
    "identifier": "b84874bf-ea9c-4b85-a6dd-f0098ec84d25",
    "agentIdentifier": "8273f480-a28b-11e7-b106-e7aa9bbee08e",
    "number": "+49221514231",
    "dateTime": "2020-08-09T12:50:00.000Z",
    "duration": 56
  },
  {
    "identifier": "8d06b645-5135-4689-891b-ccc4cab886b7",
    "agentIdentifier": "8273f480-a28b-11e7-b106-e7aa9bbee08e",
    "number": "+49221514231",
    "dateTime": "2020-08-10T10:50:00.000Z",
    "duration": 67
  },
  {
    "identifier": "c93e2611-3a35-4820-9e0d-6bc7bd764118",
    "agentIdentifier": "8273f480-a28b-11e7-b106-e7aa9bbee08e",
    "number": "+49221514231",
    "dateTime": "2020-08-11T15:50:00.000Z",
    "duration": 37
  },

  {
    "identifier": "9c5c0175-2ef7-4307-ab91-87cc1abfa235",
    "agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
    "number": "+49151484522",
    "dateTime": "2020-10-07T14:50:00.000Z",
    "duration": 16
  },
  {
    "identifier": "5ec271b1-d89c-4c5f-a552-e5d66562851a",
    "agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
    "number": "+49151484522",
    "dateTime": "2020-10-07T14:50:00.000Z",
    "duration": 118
  },
  {
    "identifier": "634ee4b1-d492-4f36-8114-f0e98fd63efe",
    "agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
    "number": "+49151484522",
    "dateTime": "2020-10-07T14:50:00.000Z",
    "duration": 63
  },
  {
    "identifier": "82f96e9e-0591-471f-8d79-0a0cb243e7e1",
    "agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
    "number": "+49151484522",
    "dateTime": "2020-10-07T14:50:00.000Z",
    "duration": 205
  },
  {
    "identifier": "1388b62e-3390-4dce-8f29-2dd714905f44",
    "agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
    "number": "+49151484522",
    "dateTime": "2020-10-07T14:50:00.000Z",
    "duration": 75
  },
  {
    "identifier": "38dead49-68de-4332-9089-4c4f519b460f",
    "agentIdentifier": "356b03dc-9ec5-11e7-97a6-d501104f897e",
    "number": "+49151484522",
    "dateTime": "2020-10-07T14:50:00.000Z",
    "duration": 122
  }

]

In the two arrays the AgentIdentifier(logs array) and Identifier(agents) have the same values.

I am trying to use the agentIdentifier in the logs array to get information from the agents array, which in this case will be the firstName.

this is what I have tried but it gives me undefined.

 <div>

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

</div>

Any help or guidance would be greatly appreciated.

score 0 · Answer 1 · answered Feb 16 '21 at 17:50

0

Collate your list first, then you can update your DOM with the modified objects:


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

answered Feb 16 '21 at 17:50

Benny Powers

3,677
3
16
35

Iterating over two arrays of objects and comparing data with same ID

1 Answers1