how to remove duplicate array elements in JavaScript and Vue

Question

I am attempting to set up a Vue demo that prevents a user from inputting duplicate items in an array. The inputs values with the following text field and button:

 <div>
    <input v-model="numberValue" type="number" />
 </div>
 <div>
   <button @click="submit" type="submit">Submit</button>
</div>

After pushing numberValue.value into the numArray array, I then for to loop through the items in numArray. Then, I used the indexOf method in a conditional to check for occurances of array items in newArray. If array items don't already exist in newArray, then they will be pushed into newArray.

const submit = () => {
  numArray.value.push(numberValue.value)
  
  newArray.value = [];
  
  for (let i = 0; i < numArray.value.length; i++) { 
    if(newArray.value.indexOf(numArray.value[i]) === -1) { 
        newArray.value.push(numArray.value[i]); 
        console.log(newArray.value)
    } else if (newArray.value.indexOf(numArray.value[i]) !== -1) {
      window.alert('No Duplicates Allowed!')
    }
  }
}

I then attempted to set up an else if statement that targets instances when the user tries to input a duplicate array item. On the else if, I added a window.alert to alert the user when entering a duplicate. After entering a duplicate, I see the alert. I then see the alert on all subsequent inputs, even ones that are not duplicates. How can I go about properly setting up the else if statement to target duplicates and trigger an alert?

Does this answer your question? How to remove all duplicates from an array of objects? — Cerceis
– Cerceis, Commented May 18, 2022 at 2:54

Rohìt Jíndal · Accepted Answer · 2022-05-18 07:14:52Z

1

You can easily achieve this requirement by comparing the input value with indexOf and lastIndexOf values in a numArray. And to have non-duplicate values you can use Set.

Working Demo :

new Vue({
  el: '#app',
  data: {
    numberValue: null,
    numArray: []
  },
  methods: {
    submit() {
      this.numArray.push(this.numberValue);
      if (this.numArray.indexOf(this.numberValue) !== this.numArray.lastIndexOf(this.numberValue)) {
        alert('No Duplicates Allowed!');
      }
      this.numArray = [...new Set(this.numArray)]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="numberValue" type="number" />
  <button @click="submit" type="submit">Submit</button>
  <br><br>
  {{ numArray }}
</div>

answered May 18, 2022 at 7:14

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

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

Comments

Fernando Callata · Accepted Answer · 2022-05-18 03:08:52Z

1

before pushing any value into your array, I would verify if the "value" that's being added is already in the array.

var existingValue = numArray.find(item => item === numberValue.value)
if (existingValue) {
  window.alert('No Duplicates Allowed!');
  return;
}
numArray.value.push(numberValue.value);

If the value does not exist then we can proceed pushing into array

answered May 18, 2022 at 3:08

Fernando Callata

343 bronze badges

Comments

Hu Bin · Accepted Answer · 2022-05-18 02:55:54Z

0

You can use a javascript set.

Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.

answered May 18, 2022 at 2:55

Hu Bin

4591 gold badge5 silver badges12 bronze badges

1 Comment

JS_is_awesome18 Over a year ago

Right, but I wish to set up the else if statement in that for loop to catch duplicate elements and trigger an alert.

Sujith Sandeep · Accepted Answer · 2022-05-18 03:02:51Z

0

Instead of for loop use javascript filter option to check whether the element already exist. So that you could restrict the user from making the duplicate entry.

answered May 18, 2022 at 3:02

Sujith Sandeep

1,24710 silver badges21 bronze badges

Comments

Taurz · Accepted Answer · 2022-05-18 03:32:27Z

0

The submit function's logic is wrong. For example, debug it by steps as below.

enter '5', after submit(), numArray = ['5'], newArray = ['5']
enter '5', after submit(), numArray = ['5', '5'], newArray = ['5'], window.alert() called.
enter '2', numArray = ['5', '5', '2'], after fisrt for loop, newArray = ['5'], after second loop, window.alert() called because numArray[1] is '5' also.

So you need to do numArray = newArray.concat() after sumbit() to make numArray undunplicated. Otherwise it will trigger alert on all subsequent inputs.

answered May 18, 2022 at 3:32

Taurz

3882 silver badges6 bronze badges

Comments

Aniket Gund · Accepted Answer · 2024-03-21 07:17:33Z

0

You can try with Set you will get unique array. In ES6 with the help of Set and ... (spread operator) we can get unique array

newArray.value = [...new Set [numArray?.value]]

edited Mar 21, 2024 at 7:17

answered May 18, 2022 at 3:03

Aniket Gund

394 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

how to remove duplicate array elements in JavaScript and Vue

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related