I am executing the following code:

        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 loop iterates through meals, and gets the product data from the backend using a GET call.

this.products array contains an array of objects of type Products. In each iteration a new Product is downloaded from the backend and pushed into the array. After running through the loop all of the Products in the array have the same ID, but all of the other properties are different.

As you can see in the console log output of the this.products array, two objects have the same ID, even though when I console.log output each individual response from the backend the ID's are different.

What is going on?