How to compare two array of objects and update the first object if value is present in the second object

I have two arrays of objects, and I want to update the data in the first array if there is a similar data in the second array. I tried using forEach, but I get an error after looping through the second element of the response array.

First array of objects:

const body = [{
    slot: "9:00",
    status: "Available",
    clientName: "",
    doctorName: ""
  }, {
    slot: "9:30",
    status: "Available",
    clientName: "",
    doctorName: ""
  }, {
    slot: "1:00",
    status: "Available",
    clientName: "",
    doctorName: ""
  }, {
    slot: "1:30",
    status: "Available",
    clientName: "",
    doctorName: ""
  }
]

Second array of objects:

const response = [{
  clientName: "John Doe",
  doctorName: "Paul Pierce",
  slot: "09:00",
  status: "Not Available"
}, {
  clientName: "James Bond",
  doctorName: "Chris Paul",
  slot: "01:00",
  status: "Not Available"
}]

This is my desired output:

const result = [{
    slot: "9:00",
    status: "Not Available",
    clientName: "John Doe",
    doctorName: "Paul Pierce"
  }, {
    slot: "9:30",
    status: "Available",
    clientName: "",
    doctorName: ""
  }, {
    slot: "1:00",
    status: "Not Available",
    clientName: "James Bond",
    doctorName: "Chris Paul"
  }, {
    slot: "1:30",
    status: "Available",
    clientName: "",
    doctorName: ""
  }
]

For each element in body, find the corresponding info in response. If not found, return original one without modifying; else, merge them and return a new object.

As @trincot has pointed out, the data has two different time formats. I deal with this using String#padStart; however, it is best that they be modified at the source.

body.map(originalSlot => {
	const slotInfo = response.find(
      ({ slot }) => slot === originalSlot.slot.padStart(5, 0)
    );

	if (!slotInfo) {
		return originalSlot;
	}

	return { ...originalSlot, ...slotInfo, slot: originalSlot.slot };
});

Try it:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

const body = [
  {
    slot: '9:00',
    status: 'Available',
    clientName: '',
    doctorName: ''
  },
  {
    slot: '9:30',
    status: 'Available',
    clientName: '',
    doctorName: ''
  },
  {
    slot: '1:00',
    status: 'Available',
    clientName: '',
    doctorName: ''
  },
  {
    slot: '1:30',
    status: 'Available',
    clientName: '',
    doctorName: ''
  }
];

const response = [
  {
    clientName: 'John Doe',
    doctorName: 'Paul Pierce',
    slot: '09:00',
    status: 'Not Available'
  },
  {
    clientName: 'James Bond',
    doctorName: 'Chris Paul',
    slot: '01:00',
    status: 'Not Available'
  }
];

const results = body.map(originalSlot => {
	const slotInfo = response.find(
    ({ slot }) => slot === originalSlot.slot.padStart(5, 0)
  );

	if (!slotInfo) {
		return originalSlot;
	}

	return { ...originalSlot, ...slotInfo, slot: originalSlot.slot };
});

console.log(results);

<!-- end snippet -->

Assuming you change the response array slot times to match the format of the body (if you choose not to this, you can use the method used by @Aniket Raj in his answer to compare the times):

You could use this very simple self-explanatory method:

let result = [...body];

for (let time of body) {
    let responseSlot = response.find(s => s.slot == time.slot);

    if (responseSlot) {
        result = [...result.filter(t => t != time), responseSlot];
    }
}

Which outputs the following:

[
  { slot: '9:30',
    status: 'Available',
    clientName: '',
    doctorName: ''
  },
  { slot: '1:30',
    status: 'Available',
    clientName: '',
    doctorName: ''
  },
  {
    clientName: 'John Doe',
    doctorName: 'Paul Pierce',
    slot: '9:00',
    status: 'Not Available'
  },
  {
    clientName: 'James Bond',
    doctorName: 'Chris Paul',
    slot: '1:00',
    status: 'Not Available'
  }
]

That is you change response array to this:

const response = [{
    clientName: "John Doe",
    doctorName: "Paul Pierce",
    slot: "9:00",
    status: "Not Available"
}, {
    clientName: "James Bond",
    doctorName: "Chris Paul",
    slot: "1:00",
    status: "Not Available"
}]

Here you can try this logic :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const first = [
  {
    slot: "9:00",
    status: "Available",
    clientName: "",
    doctorName: "",
  },
  {
    slot: "9:30",
    status: "Available",
    clientName: "",
    doctorName: "",
  },
  {
    slot: "1:00",
    status: "Available",
    clientName: "",
    doctorName: "",
  },
  {
    slot: "1:30",
    status: "Available",
    clientName: "",
    doctorName: "",
  },
];

const second = [
  {
    clientName: "John Doe",
    doctorName: "Paul Pierce",
    slot: "9:00",
    status: "Not Available",
  },
  {
    clientName: "James Bond",
    doctorName: "Chris Paul",
    slot: "1:00",
    status: "Not Available",
  },
];

// To solve problem for 09:01 or 9:01
function timeStringChecker(timeStr) {
  let [leftStr, rightStr] = timeStr.split(":");
  return +(leftStr + rightStr);
}

first.forEach((elem) =>
  second.some((elem2) => {
    if (timeStringChecker(elem.slot) == timeStringChecker(elem2.slot)) {
      Object.assign(elem, elem2);
    }
  })
);

console.log(first);

<!-- end snippet -->

As mentioned from a previous post this is what you are looking for:

const result = [];
Object.keys(body).forEach((key) =>
  key in response ? (result[key] = response[key]) : (result[key] = body[key])
);

The logic here is that you parse all the properties of the body object and if the property value matched with the response object property value it will overwrite the value of the property for the body object. Otherwise it just keep the values of the specific body object as it is.

Link to previous post: https://stackoverflow.com/questions/51206836/update-an-object-with-matching-properties-and-ignore-new-properties