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?](https://stackoverflow.com/questions/2218999/how-to-remove-all-duplicates-from-an-array-of-objects) — Cerceis, May 18 '22 at 02:54

score 1 · Answer 1 · answered May 18 '22 at 03:08

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

score 1 · Accepted Answer · answered May 18 '22 at 07:14

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>

score 0 · Answer 3 · answered May 18 '22 at 02:55

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 '22 at 02:55

Hu Bin

429
1
4
10

Right, but I wish to set up the ```else if``` statement in that for loop to catch duplicate elements and trigger an alert. – JS_is_awesome18 May 18 '22 at 02:57

score 0 · Answer 4 · answered May 18 '22 at 03:02

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 '22 at 03:02

Sujith Sandeep

1,185
6
20

Aniket Gund · Answer 5 · 2022-05-20T04:40:04.330

0

You can try with Set you will get unique array

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

edited May 20 '22 at 04:40

answered May 18 '22 at 03:03

Aniket Gund

41
4

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](/help/how-to-answer). – Community May 18 '22 at 11:01

score 0 · Answer 6 · answered May 18 '22 at 03:32

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.

how to remove duplicate array elements in JavaScript and Vue

6 Answers6