When running the code below:
dietDay.meals.forEach((meal) => {
meal.mealProducts.forEach((mealProduct) => {
if (
mealProduct.product.id &&
this.fetchedProductIds.includes(mealProduct.product.id)
) {
return;
} else if (mealProduct.product.id) {
this.fetchedProductIds.push(mealProduct.product.id);
this.httpClient.get(environment.backendUrl + '/products/' + mealProduct.product.id)
.subscribe((response: any) => {
this.products.push(response);
this.setDaySummary();
this.setActiveMealSummary();
});
}
});
});
});
The code loops through meals and retrieves product data from the backend using a GET request.
The this.products array stores objects of type Products.
Each iteration downloads a new Product from the backend and adds it to the array.
Following completion of the loop, all Products in the array have the same ID, with differing properties.
https://i.stack.imgur.com/dI0kq.png
Reviewing the console log of the this.products array, two objects share the same ID. However, individual responses from the backend showcase distinct IDs when logged separately.
What could be causing this discrepancy?