How to replace or update item of array in JavaScript

Question

The title describes what I want, this is the code

All is fine when we add a product to items if it doesn't exists (difference by id). But if it exists, I want to modify only the item. The difference is made by id of each item in items array.

Eg : if first, id = 1, qty = 3, and next, id = 1, qty = 3, I want the update of qty in items

new Vue({
  el: '#fact',
  data: {
    input: {
      id: null,
      qty: 1
    },
    items: []
  },
  methods: {
    addItem() {
      var item = {
        id: this.input.id,
        qty: this.input.qty
      };
      
      if(index = this.itemExists(item) !== false)
      {
          this.items.slice(index, 1, item);
          return null;
      }
      
      this.items.push(item)
    },
    itemExists($input){
       for (var i = 0, c = this.items.length; i < c; i++) {
           if (this.items[i].id == $input.id) {
               return i;
          }
       }
       return false;
    }
  }
})

<Doctype html>
  <html>

  <head>
    <meta charset="utf-8" />
    <title>Add product</title>
  </head>

  <body>
    <div id="fact">
      <p>
        <input type="text" v-model="input.id" placeholder="id of product" />
      </p>
      <p>
        <input type="text" v-model="input.qty" placeholder="quantity of product" />
      </p>
      <button @click="addItem">Add</button>

      <ul v-if="items.length > 0">
        <li v-for="item in items">{{ item.qty + ' ' + item.id }}</li>
      </ul>
      
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
  </body>

  </html>

tony19 · Accepted Answer · 2022-07-15 21:09:27Z

6

You might have misused the slice method, change slice to splice works for me:

this.items.splice(index, 1, item)

slice doesn't trigger view updates according to the documentation here.

Vue wraps an observed array’s mutation methods so they will also trigger view updates. The wrapped methods are:

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

edited Jul 15, 2022 at 21:09

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 6, 2018 at 17:11

akuiper

216k33 gold badges362 silver badges379 bronze badges

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

4 Comments

Goms Over a year ago

Thank you for this remark! But even modifying, he adds this time the item in question. By cons I want the item already added in items is changed!

akuiper Over a year ago

By using splice(index, 1, item), you replace the original item with the new item. If you have other fields, you might use Object.assign to create a new item that merge into the original item and then replace it. Something like: splice(index, 1, Object.assign({}, this.items[index], item)).

akuiper Over a year ago

Directly modifying the item in place won't be a good idea because Vue can't detect the changes you made. See Caveates.

Goms Over a year ago

Thank you for your assistance ! after a moment to check what it wasn't work, I discover if(index = this.itemExists(item) !== false) that would be (index = this.itemExists(item)) !== false). With the same code, of course your remark included (splice instand of slice), all is work fine now ! Thank you !

Rahul Reghunath · Accepted Answer · 2018-01-06 17:48:14Z

-1

if(index = this.itemExists(item) !== false)
{
    for (let value of this.items) {
        if(value.id === item.id) {
            value.qty = item.qty;
        }
     }

     return null;
 }

edited Jan 6, 2018 at 17:48

answered Jan 6, 2018 at 17:09

Rahul Reghunath

1,2841 gold badge15 silver badges24 bronze badges

2 Comments

Goms Over a year ago

The difference is made by id of item (item.id) , do you think realy that it will help me ?

Alper t. Turker Over a year ago

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion

Collectives™ on Stack Overflow

How to replace or update item of array in JavaScript

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related