Angular object array isn't filling up properly

Question

I have two object classes one for the CartFoodItem that is filled by the user adding an item and a OrderItem which is sent to the database. When the user clicks the submit button the onSubmit function activates and the OrderItem object array should be filled in using the data from the CartFoodItem object array. The problem is the OrderItem array is filled with data from the last added CartFoodItem.

What the console looks like

this.orderItems name Apples
this.orderItems name Strawberries
this.orderItems name Avocados
this.orderItems name Grapes
this.orderItems name Bananas
size of order items is 5
first of orderitems name is Bananas
last of orderitems name is Bananas

This is how the orderItems array looks like after it is posted to the database in mysql workbench.

image version enter image description here

text version

id:    name:      image_url:                      quantity:  price:
'90', 'Bananas', 'assets/images/foodItem/Bananas.png', '1', '6.89'
'91', 'Bananas', 'assets/images/foodItem/Bananas.png', '1', '6.89'
'92', 'Bananas', 'assets/images/foodItem/Bananas.png', '1', '6.89'
'93', 'Bananas', 'assets/images/foodItem/Bananas.png', '1', '6.89'
'94', 'Bananas', 'assets/images/foodItem/Bananas.png', '1', '6.89'

It should look like this

id:    name:    image_url:                                 quantity:  price:
'90', 'Apples', 'assets/images/foodItem/Apples.png',             '1', '8.38'
'91', 'Strawberries', 'assets/images/foodItem/Strawberries.png', '1', '10.78'
'92', 'Avocados', 'assets/images/foodItem/Avocados.png',         '1', '3.69'
'93', 'Grapes', 'assets/images/foodItem/Grapes.png',             '1', '3.50'
'94', 'Bananas', 'assets/images/foodItem/Bananas.png',           '1', '6.89'

If anyone can explain why my OrderItem array isn't filling up properly or how to fill it up properly please let me know. Here is the code:

CartFoodItem class

export class CartFoodItem {

  id: number;
  name: string;
  imageUrl: string;
  price: number;
  protein: number;
  saturatedFat: number;
  transFat: number;
  cholesterol: number;
  fiber: number;
  sugars: number;

  // other nutritional values

  quantity: number;

  constructor() {

  }


}

OrderItem class

export class OrderItem {

  name: string;
  imageUrl: string;
  quantity: number;
  price: number;

  constructor() {
  }

}

ShoppingCartDetailsComponent

export class ShoppingCartDetailsComponent implements OnInit {

  cartFoodItems: CartFoodItem[] = [];
  orderItems: OrderItem[] = [];
  tempOrderItem: OrderItem = new OrderItem();

  ngOnInit(): void {
    this.listShoppingCartDetails();
  }


  onSubmit() {
    this.getOrderItems();
    console.log("size of order items is " + this.orderItems.length);
    console.log("first of orderitems name is " + this.orderItems[0].name);
    console.log("last of orderitems name is " + this.orderItems[this.orderItems.length - 1].name);

    // post function for the orderItems object array
  }

  listShoppingCartDetails() {
    //fills the cartFoodItems object array with CartFoodItem objects
  }

  getOrderItems() {
    let count = 0;
    for (let tempCartFoodItem of this.cartFoodItems) {
      this.tempOrderItem.name = tempCartFoodItem.name;
      this.tempOrderItem.imageUrl = tempCartFoodItem.imageUrl;
      this.tempOrderItem.quantity = tempCartFoodItem.quantity;
      this.tempOrderItem.price = tempCartFoodItem.price;
      

      this.orderItems.push(this.tempOrderItem);
      console.log("this.orderItem's name " + this.orderItems[count].name);
      count++;
    }

  }

}

Please post complete code. not just fragments. stackoverflow.com/help/how-to-ask — user796446
– user796446, Commented Oct 1, 2022 at 0:43

Jimeh · Accepted Answer · 2022-10-01 07:53:04Z

I see the problem. You are setting every instance of your array to the same object in getOrderItems(). You change the name, imageUrl etc. of this.tempOrderItem to whatever is in tempCartFoodItem, but instead of creating a new object each time you change the name of this.tempOrderItem. After the for loop in getOrderItems() if you set this.tempOrderItem.name = 'this is all the same object'; you will see what I mean.

What you most likely want is to remove the this.tempOrderItem instance variable and change the following in getOrderItems():

  getOrderItems() {
    let count = 0;
    for (let tempCartFoodItem of this.cartFoodItems) {
      const tempOrderItem = new OrderItem();
      tempOrderItem.name = tempCartFoodItem.name;
      tempOrderItem.imageUrl = tempCartFoodItem.imageUrl;
      tempOrderItem.quantity = tempCartFoodItem.quantity;
      tempOrderItem.price = tempCartFoodItem.price;
      

      this.orderItems.push(tempOrderItem);
      console.log("this.orderItem's name " + this.orderItems[count].name);
      count++;
    }

  }

Hopefully that helps.

Collectives™ on Stack Overflow

Angular object array isn't filling up properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related