Push object into array in Angular

Question

I have the problem with pushing object into array. I have array with objects inside. This component print it:

<div class="row"
  *ngFor="let element of dietList">
{{element.name}} {{ element.weight }}
</div>

Second add object to array but I would have possibility to add various type of object like: rice, chicken and so on. So I have created other array with object inside. This array don't contains wieght becouse user would have possibility to check his own value. So into second component I print name of product and input with local refference

<div *ngFor="let product of products">
  {{ product.name }}<input type="text" #weight>
  <button class="btn btn-primary" (click) = "onAddNewElement(product, weight.value)">Add</button>
</div>

onAddNewElement() method is very simple:

  onAddNewElement(element, weight){
    let newElement = element;
    newElement.weight = weight;
    this.dietService.newElement(newElement);
  }

newElement() method pushing object into array.

  newElement(element){
    PRODUCTS.push(element);
  }

It works but not like I want. When I add my first element everything is ok, but when I add next element values of first element is going to overwrite. Example: In first step I checked weight input on 120g (chicken for example). In second step I checked weight on 200g. In result 2 elements I going to weight value on 200g. First value every time is overwrite.

Use the Object.assign() function to instantiate a copy of the over instead of reusing it. — Ploppy
– Ploppy, Commented Dec 16, 2017 at 20:21

Johan Kvint · Accepted Answer · 2017-12-16 21:43:25Z

1

So here is what I think is happening.

You have an array of products, lets say:

var products = [{name: 'myOnlyProduct', weight: 120}]

Now you loop through that array of products in the *ngFor. You change the weight of that one object in your html and pass it to the onAddNewElement. In your onAddNewElement you update the old object with the new weight and pass it to newElement. newElement push the exact same object onto the array again.

What you need to do is create a new object before you change the weight and then push that to the array.

onAddNewElement(element, weight){
  let newElement = Object.assign({}, element); // make a copy
  newElement.weight = weight;
  this.dietService.newElement(newElement);
}

answered Dec 16, 2017 at 21:43

Johan Kvint

9171 gold badge8 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Push object into array in Angular

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