How to check if the ID in an array of objects is the same as the ID in another array of objects?

Question

I have two array of objects. The first one contain a user's vacation and leave information in the company. The second one contains the leave and vacation types that is entered by the company. Here are my arrays;

USER PERMIT PERIOD ARRAY;

permitPeriod: [
   {
      "id":"681ccdfa-ffa9-444f-85d0-cd52dd3fd6aa",
      "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10",
      "userId":"10e8b6c0-5c17-4b75-872f-062d3716d7a7",
      "permissionRightStartDate":"01 July 2022",
      "permissionRightEndDate":"03 July 2022",
      "active":false,
      "permitPeriod":"2",
      "permitPeriodType":"05097d26-f04d-483b-bdd9-fa51dc40046d",
      "createdAt":"2022-07-27T12:42:03.948+00:00",
      "state":"Deactivated"
   },
   {
      "id":"cd7fa524-ee24-4a03-b654-4a7a8ad78fec",
      "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10",
      "userId":"10e8b6c0-5c17-4b75-872f-062d3716d7a7",
      "permissionRightStartDate":"27 July 2022",
      "permissionRightEndDate":"31 July 2022",
      "active":false,
      "permitPeriod":"2",
      "permitPeriodType":"7b987436-ead1-47b6-9ed1-cef2a857f114",
      "createdAt":"2022-07-27T12:22:40.360+00:00",
      "state":"Deactivated"
   }
]

And here is the list of Leave Types;

leaveTypes:[
   {
      "id":"034cee3b-59ef-4b02-99c1-ec69fc28c6bb",
      "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10",
      "wageStatus":1,
      "leaveType":"Yearly Leave",
      "abbreviation":null,
      "status":true
   },
   {
      "id":"05097d26-f04d-483b-bdd9-fa51dc40046d",
      "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10",
      "wageStatus":1,
      "leaveType":"Reported Leave",
      "abbreviation":null,
      "status":true
   },
   {
      "id":"5d5f46d0-48b2-4bf8-b400-93df1b928cd9",
      "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10",
      "wageStatus":1,
      "leaveType":"Sunday",
      "abbreviation":null,
      "status":true
   },
   {
      "id":"6790f3df-b7c8-4f59-ad5c-6059aa3bcf59",
      "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10",
      "wageStatus":1,
      "leaveType":"Birth Leave",
      "abbreviation":null,
      "status":true
   },
   {
      "id":"6eb384d7-3bde-49a2-abf3-0ce61f6679f2",
      "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10",
      "wageStatus":1,
      "leaveType":"Unpaid Leave",
      "abbreviation":null,
      "status":true
   },
   {
      "id":"7b987436-ead1-47b6-9ed1-cef2a857f114",
      "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10",
      "wageStatus":1,
      "leaveType":"Death Leave",
      "abbreviation":null,
      "status":true
   },
   {
      "id":"a001f535-e919-47bb-93d3-1beb61a93da0",
      "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10",
      "wageStatus":0,
      "leaveType":"Bonus Leave",
      "abbreviation":"P",
      "status":true
   },
]

Both of these arrays can change at any time. The user can request permission from the system or the company can add or remove leave types in the leaveTypes list. In other words, these two arrays are not in a static variable.

What I want to do is, compare these. Here is my logic;

If the ID of one of the elements in the permitPeriod array is equal to the ID of one of the elements in the leaveTypes arrays, I just need to set a variable named permitPeriod.permitPeriodName for that element to leaveType.leaveType with equal ID. Thus, using the permitPeriodType ID in the user's permission information, I can take the string value of the matched data in the leaveTypes array and display it in the table.

Here is what I've tried;

      if (this.leaveTypes != null) {
        for(var i = 0; this.permitPeriod.length; i++){
          for(var j = 0; this.leaveTypes.length; j++){
            if(this.permitPeriod[i].permitPeriodType == this.leaveTypes[j].id){
              this.permitPeriod[i].permitPeriodName = this.leaveTypes[j].leaveType;
            }
          }
        }

So basically what I wanted to do is search both arrays, find the common ID in one of the element(s) and equalize the value in one to the other. How do I do that? Thanks in advance.

UPDATE Here is the response when I send the request to get the permitPeriod(s)

So there is no permitPeriodName that came from response. I need to create and push that variable when it is equal to leaveType.leaveType

Answer 1

Array.map with Array.find inside:

 const permitPeriod = [ { "id":"681ccdfa-ffa9-444f-85d0-cd52dd3fd6aa", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "userId":"10e8b6c0-5c17-4b75-872f-062d3716d7a7", "permissionRightStartDate":"01 July 2022", "permissionRightEndDate":"03 July 2022", "active":false, "permitPeriod":"2", "permitPeriodType":"05097d26-f04d-483b-bdd9-fa51dc40046d", "createdAt":"2022-07-27T12:42:03.948+00:00", "state":"Deactivated" }, { "id":"cd7fa524-ee24-4a03-b654-4a7a8ad78fec", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "userId":"10e8b6c0-5c17-4b75-872f-062d3716d7a7", "permissionRightStartDate":"27 July 2022", "permissionRightEndDate":"31 July 2022", "active":false, "permitPeriod":"2", "permitPeriodType":"7b987436-ead1-47b6-9ed1-cef2a857f114", "createdAt":"2022-07-27T12:22:40.360+00:00", "state":"Deactivated" } ]; const leaveTypes = [ { "id":"034cee3b-59ef-4b02-99c1-ec69fc28c6bb", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "wageStatus":1, "leaveType":"Yearly Leave", "abbreviation":null, "status":true }, { "id":"05097d26-f04d-483b-bdd9-fa51dc40046d", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "wageStatus":1, "leaveType":"Reported Leave", "abbreviation":null, "status":true }, { "id":"5d5f46d0-48b2-4bf8-b400-93df1b928cd9", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "wageStatus":1, "leaveType":"Sunday", "abbreviation":null, "status":true }, { "id":"6790f3df-b7c8-4f59-ad5c-6059aa3bcf59", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "wageStatus":1, "leaveType":"Birth Leave", "abbreviation":null, "status":true }, { "id":"6eb384d7-3bde-49a2-abf3-0ce61f6679f2", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "wageStatus":1, "leaveType":"Unpaid Leave", "abbreviation":null, "status":true }, { "id":"7b987436-ead1-47b6-9ed1-cef2a857f114", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "wageStatus":1, "leaveType":"Death Leave", "abbreviation":null, "status":true }, { "id":"a001f535-e919-47bb-93d3-1beb61a93da0", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "wageStatus":0, "leaveType":"Bonus Leave", "abbreviation":"P", "status":true }, ]; const result = permitPeriod.map(pp => { const leaveType = leaveTypes.find(lt => lt.id === pp.permitPeriodType); if (leaveType) { return {...pp, permitPeriodName: leaveType.leaveType}; } return pp; }); console.log(result);

Answer 2

Your code was basically correct you just need to change the breakup condition for your loops from for(var i = 0; this.permitPeriod.length; i++) to for(var i = 0; i < this.permitPeriod.length; i++) and from for(var j = 0; this.leaveTypes.length; j++) to for(var j = 0; j < this.leaveTypes.length; j++)

 const permitPeriod = [ { "id":"681ccdfa-ffa9-444f-85d0-cd52dd3fd6aa", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "userId":"10e8b6c0-5c17-4b75-872f-062d3716d7a7", "permissionRightStartDate":"01 July 2022", "permissionRightEndDate":"03 July 2022", "active":false, "permitPeriod":"2", "permitPeriodType":"05097d26-f04d-483b-bdd9-fa51dc40046d", "createdAt":"2022-07-27T12:42:03.948+00:00", "state":"Deactivated" }, { "id":"cd7fa524-ee24-4a03-b654-4a7a8ad78fec", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "userId":"10e8b6c0-5c17-4b75-872f-062d3716d7a7", "permissionRightStartDate":"27 July 2022", "permissionRightEndDate":"31 July 2022", "active":false, "permitPeriod":"2", "permitPeriodType":"7b987436-ead1-47b6-9ed1-cef2a857f114", "createdAt":"2022-07-27T12:22:40.360+00:00", "state":"Deactivated" } ]; const leaveTypes = [ { "id":"034cee3b-59ef-4b02-99c1-ec69fc28c6bb", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "wageStatus":1, "leaveType":"Yearly Leave", "abbreviation":null, "status":true }, { "id":"05097d26-f04d-483b-bdd9-fa51dc40046d", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "wageStatus":1, "leaveType":"Reported Leave", "abbreviation":null, "status":true }, { "id":"5d5f46d0-48b2-4bf8-b400-93df1b928cd9", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "wageStatus":1, "leaveType":"Sunday", "abbreviation":null, "status":true }, { "id":"6790f3df-b7c8-4f59-ad5c-6059aa3bcf59", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "wageStatus":1, "leaveType":"Birth Leave", "abbreviation":null, "status":true }, { "id":"6eb384d7-3bde-49a2-abf3-0ce61f6679f2", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "wageStatus":1, "leaveType":"Unpaid Leave", "abbreviation":null, "status":true }, { "id":"7b987436-ead1-47b6-9ed1-cef2a857f114", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "wageStatus":1, "leaveType":"Death Leave", "abbreviation":null, "status":true }, { "id":"a001f535-e919-47bb-93d3-1beb61a93da0", "companyId":"535f37cc-97cb-461b-9626-f85dc9e59c10", "wageStatus":0, "leaveType":"Bonus Leave", "abbreviation":"P", "status":true }, ]; if (leaveTypes;= null) { for(var i = 0. i < permitPeriod;length; i++){ for(var j = 0. j < leaveTypes;length. j++){ if(permitPeriod[i].permitPeriodType == leaveTypes[j].id){ permitPeriod[i].permitPeriodName = leaveTypes[j];leaveType. } } } } console;log(permitPeriod)