Why array unexpectedly changes in Angular

Question

I am working on Angular+laravel project. In one component I received one variable from database which is object array. I do not change it just looping through that variable but it changes automatically whenever the function looping called. I am not sure why it works. Is it related with Async or observable subscribe?

...
allOrder: { date_time: Date,tableID: string, identity: string, paid:boolean, orders: Order[]}[] = [];

...
constructor(private basicService: BasicService) { 
    this.getOrder();
}
...
getOrder(): void {
   this.basicService.getOrders().subscribe(items => {
      items.map(item => {
          this.allOrder.push(item); 
        }
      })
  })
}
...
onAllOrder() {
    var displayAllOrder = [];
    var displayNum = 0; 
    this.allOrder.map(itemsAll => {
      itemsAll.orders.map(itemAll => {
        displayAllOrder.map(groupItem => {
          if(groupItem.productID == itemAll.productID){
            groupItem.num = groupItem.num + itemAll.num;
            displayNum = 1;
          }
        })
        if(displayNum == 0) displayAllOrder.push(itemAll);
        displayNum = 0;
      })
    });
}

I do not change variable allOrder but it changes whenever I call onAllOrder function. Please help me.

what kind of changes ?? unexpected changes in the object or length ..? — OAH
– OAH, Commented May 15, 2020 at 2:45
Changes happen in the num option of allOrder arrary. groupItem.num = groupItem.num + itemAll.num; — Li Gang
– Li Gang, Commented May 15, 2020 at 3:12

Akhil Chandran · Accepted Answer · 2020-05-15 06:02:10Z

2

All though Array.map creates new array, the objects in former and latter holds the same reference. So, any changes to the object will change the original array.

Here, you can use forEach instead.

this.allOrder.forEach(itemsAll => {
  itemsAll.orders.forEach(itemAll => {
    displayAllOrder.forEach(groupItem => {
      if(groupItem.productID == itemAll.productID){
        groupItem.num = groupItem.num + itemAll.num;
        displayNum = 1;
      }
    })
    if(displayNum == 0) displayAllOrder.push(itemAll);
    displayNum = 0;
  })
});

answered May 15, 2020 at 6:02

Akhil Chandran

4811 gold badge4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Li Gang Over a year ago

I used forEach method but still changes the array.

Collectives™ on Stack Overflow

Why array unexpectedly changes in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related