I am facing an issue where I have two sets of objects labeled LABELS1 and LABELS2, and my goal is to iterate through them. If any of the IDs from LABELS1 match any of the IDs from LABEL2, I need to update the simple_value of LABELS1 with the corresponding value from LABELS2. However, despite my attempts, the comparison always fails. Below is the code I have been working on. Any assistance in resolving this matter would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
const LABELS1 = [
{"id":"bread", "simple_value":"Bread"},
{"id":"apple", "simple_value":"Apple"}
];
const LABELS2 = [
{"id":"bread", "simple_value":"Bread with Butter", "detailed_value":"Toasted Bread with a Dab of Butter"},
{"id":"wine", "simple_value":"Wine", "detailed_value":"Wine with Cheese"}
];
var labels1= [];
var labels2= [];
$.when(
$.getJSON(LABELS1, json => {
labels1= json;
}),
$.getJSON(LABELS2, json => {
labels2= json;
})
).then(() => {
Object.keys(labels1).forEach(key => {
if (labels2[key].id=== labels1[key].id) {
labels1[key].simple_value= labels2[key].simple_value;
}
});
});
</script>
</body>
</html>