Prevent Repeated Data Input in an Array using JavaScript

Question

Prevent Repeated Data Input in an Array using JavaScript

I am facing an issue where I need to ensure that the values being inserted are not repeated when performing a push operation.

Below is the snippet of code in question:

addAddress: function() {
            this.insertAddresses.Address = this.address_address;
            this.insertAddresses.State = this.selectedStateAddress;
            this.insertAddresses.City = this.selectedCityAddress;
            if(this.insertAddresses.Address !== "" && this.insertAddresses.State !== null && this.insertAddresses.City !== null) {
                let copy = Object.assign({}, this.insertAddresses);
                this.addresses.push(copy);
            }
            else
            {
                this.$message.error('Not enough data to add');
                return;
            }
        },

Upon adding a new element, the output looks like this:

https://i.stack.imgur.com/qCiiM.png

Subsequently, clicking the add button duplicates the same values. I am seeking guidance on how to implement validation to prevent duplicate entries. What would be the appropriate approach for achieving this?

https://i.stack.imgur.com/6B1rO.png

javascript vue.js vuejs2

Answer 1

Answer №1

Before adding an item to the array, make sure it doesn't already exist.

To check if the item is already in the array, you can utilize the Array.prototype.find method:

export default {
  methods: {
    addItem() {
      const newItem = {
        ItemName: this.item_name,
        Quantity: this.selectedQuantity,
        Price: this.item_price
      }
      this.insertNewItem(newItem)
    },
    insertNewItem(item) {
      const existingItem = this.itemsArray.find(i => {
        return 
            i.ItemName === item.ItemName
         && i.Quantity === item.Quantity
         && i.Price === item.Price
      })

      if (!existingItem) {
        this.itemsArray.push(item)
      }
    }
  }
}

If your application requires efficient performance (e.g., dealing with a large number of items), consider maintaining a separate dictionary to keep track of duplicate items:

export default {
  data() {
    return {
      seenItems: {}
    }
  },
  methods: {
    insertNewItem(item) {
      const { ItemName, Quantity, Price } = item
      const key = JSON.stringify({ ItemName, Quantity, Price })
      const seen = this.seenItems[key]

      if (!seen) {
        this.seenItems[key] = item
        this.itemsArray.push(item)
      }
    }
  }
}

example

Answer 2

Before adding an item to the array, make sure it doesn't already exist.

To check if the item is already in the array, you can utilize the Array.prototype.find method:

export default {
  methods: {
    addItem() {
      const newItem = {
        ItemName: this.item_name,
        Quantity: this.selectedQuantity,
        Price: this.item_price
      }
      this.insertNewItem(newItem)
    },
    insertNewItem(item) {
      const existingItem = this.itemsArray.find(i => {
        return 
            i.ItemName === item.ItemName
         && i.Quantity === item.Quantity
         && i.Price === item.Price
      })

      if (!existingItem) {
        this.itemsArray.push(item)
      }
    }
  }
}

If your application requires efficient performance (e.g., dealing with a large number of items), consider maintaining a separate dictionary to keep track of duplicate items:

export default {
  data() {
    return {
      seenItems: {}
    }
  },
  methods: {
    insertNewItem(item) {
      const { ItemName, Quantity, Price } = item
      const key = JSON.stringify({ ItemName, Quantity, Price })
      const seen = this.seenItems[key]

      if (!seen) {
        this.seenItems[key] = item
        this.itemsArray.push(item)
      }
    }
  }
}

example

Answer 3

Answer №2

Take a look at this code snippet:

let filter= this.addresses.find(x=> this.insertAddresses.State==x.State)
if (filter==null) {
   this.$message.error('Error: Address not found');
}

Alternatively, you can filter all the addresses using:

let filter= this.addresses.find(x=> this.insertAddresses.Adress==x.Adress && this.insertAddresses.State==x.State && this.insertAddresses.City==x.City)
if (filter==null) {
   this.$message.error('Error: Address not found');
}
``

Answer 4

Take a look at this code snippet:

let filter= this.addresses.find(x=> this.insertAddresses.State==x.State)
if (filter==null) {
   this.$message.error('Error: Address not found');
}

Alternatively, you can filter all the addresses using:

let filter= this.addresses.find(x=> this.insertAddresses.Adress==x.Adress && this.insertAddresses.State==x.State && this.insertAddresses.City==x.City)
if (filter==null) {
   this.$message.error('Error: Address not found');
}
``

Prevent Repeated Data Input in an Array using JavaScript

Answer №1

Answer №2

Similar questions

Remove any list items that do not possess a particular class

Tips for triggering a JavaScript function within WordPress using an inline function call

Truncating long text labels in Material UI Autocomplete using ReactJS

What is the best way to incorporate new elements into the DOM in order to allow users to share their comments

Should a MEAN stack app require the use of two servers in order to run?

What is the best way to manage data in a single-page application and retrieve it after the page has been refreshed?

What could be the reason for the lack of controller updates despite changes made to the service

Could it be that the function is returning undefined because console.log is executing before the result is actually returned? Perhaps a promise

The model.find operation is failing to retrieve the necessary fields from the database

Implement a new method called "defer" to an array that will be resolved at a later time using Promise.all()

Modifying paragraph content with JavaScript based on selected radio button values and troubleshooting the onclick event not triggering

AngularJS - $scope.$destroy does not eliminate listeners

What is the best way to exclude an external HTML file from being displayed on the home page?

React event handling

Getting a Next.js error after performing a hard refresh on a page that contains a dynamic query

Is it possible for an Ajax/jQuery script to display multiple dependent dropdown box options within a single Form URL?

How to add a service to a static function in Angular

Can you explain the functionality of the NextSibling method?

Effective sparse translation between whole numbers

There was an error of "Uncaught TypeError: CANNON.NaiveBroadPhase is not a constructor"