We Keep Coding

Validate Duplicate Data Entry in Array - JavaScript

My problem is that I want to insert values that are not repeated when doing a push
This is my code :
addAddress: function() {
this.insertAddresses.Adress = this.address_address
this.insertAddresses.State = this.selectedStateAddress
this.insertAddresses.City = this.selectedCityAddress
if(this.insertAddresses.Adress !== "" && this.insertAddresses.State !== null && this.insertAddresses.City !== null) {
let copia = Object.assign({}, this.insertAddresses);
this.addresses.push(copia)
}
else
{
this.$message.error('Not enough data to add');
return
}
},
When adding a new element to my object, it returns the following.
When I press the add button again, it adds the same values again, I want to perform a validation so that the data is not the same. How could I perform this validation in the correct way?

Verify that the item doesn't already exist in the array before inserting.
You can search the array using Array.prototype.find:
export default {
methods: {
addAddress() {
const newItem = {
Address: this.address_address,
State: this.selectedStateAddress,
City: this.selectedCityAddress
}
this.insertItem(newItem)
},
insertItem(item) {
const existingItem = this.addresses.find(a => {
return
a.State === item.State
&& a.City === item.City
&& a.Address === item.Address
})
if (!existingItem) {
this.addresses.push(item)
}
}
}
}
On the other hand, if your app requires better performance (e.g., there are many addresses), you could save a separate dictonary to track whether the address already exists:
export default {
data() {
return {
seenAddresses: {}
}
},
methods: {
insertItem(item) {
const { Address, State, City } = item
const key = JSON.stringify({ Address, State, City })
const seen = this.seenAddresses[key]
if (!seen) {
this.seenAddresses[key] = item
this.addresses.push(item)
}
}
}
}
demo

check it:
let filter= this.addresses.find(x=> this.insertAddresses.State==x.State)
if (filter==null) {
this.$message.error('your message');
}
OR FILTER ALL
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('your message');
}
``

UnhandledPromiseRejectionWarning: TypeError: Cannot read property parameter of undefined

So what I'm trying to do is create a class method that compares two objects and returns custom data depending on the results. To get this custom data, I have destructured parameters that should let me customize what kind of data it returns. Here's the code so far for reference:
objects(obj1, obj2, { keysAndValues = true, returnSimplified = false, returnDetailed = false, keysOnly = false, valuesOnly = false }) {
try {
var results = [];
if (keysOnly == true) {
if (valuesOnly == true || keysAndValues == true) {
throw new SyntaxError('Two conflicting arguments cannot be chosen.');
}
Object.keys(obj1).forEach(o1 => Object.keys(obj2).forEach(o2 => {
if (o1 == o2) results.push(o1);
}));
} else if (valuesOnly == true) {
if (keysOnly == true || keysAndValues == true) {
throw new SyntaxError('Two conflicting arguments cannot be chosen.');
}
Object.values(obj1).forEach(o1 => Object.values(obj2).forEach(o2 => {
if (o1 == o2) results.push(o1);
}));
} else if (keysAndValues == true) {
if (valuesOnly == true || keysOnly == true) throw new SyntaxError('Two conflicting arguments cannot be chosen.');
results.push('Keys: ')
Object.keys(obj1).forEach(o1 => Object.keys(obj2).forEach(o2 => {
if (o1 == o2) results.push(o1);
}));
results.push('Values: ')
Object.values(obj1).forEach(o1 => Object.values(obj2).forEach(o2 => {
if (o1 == o2) results.push(o1);
}));
} else if (returnSimplified == true && returnDetailed == true) throw new SyntaxError('Two conflicting arguments cannot be chosen.');
var details = {
NumberOfMatchingResults: results.length,
ObjectName1: obj1,
ObjectName2: obj2,
ObjectKeys1: Object.keys(obj1),
ObjectKeys2: Object.keys(obj2),
ObjectValues1: Object.values(obj1),
ObjectValues2: Object.values(obj2)
};
return ((returnSimplified == true && !returnDetailed == true) ? results.length : (returnDetailed == true) ? details : results);
} catch (error) {
console.log(error.stack);
}
}
Now, it's not the prettiest piece of code out there, but for the most part, it gets the job done. The problem comes in when I try to call the method without one of the destructured parameters.
Example:
console.log(Compare.objects(obj1, obj2)); //returns 'Cannot read property "keysAndValues" of undefined'
I don't know what else to try, because nothing has worked so far, so I'm instead bringing the question here. Any help would be awesome.

The problem is that you need to set a default value for your destructured parameter itself. Just set its default value as an empty object to accomplish your desired outcome.
objects(obj1, obj2, {
keysAndValues = true,
returnSimplified = false,
returnDetailed = false,
keysOnly = false,
valuesOnly = false } = {}
) {
// method code here
}
You can clean up your method further by eliminating equality operators when checking for truthy or falsey values. if (valuesOnly) is preferred over if (valuesOnly == true).
Also, when comparing non-boolean values, you should always use strict equality operators to avoid bugs. So (o1 == o2) should be (o1 === o2)

Define your third parameter like this:
objects(obj1, obj2, booleans = {}) {
const {
keysAndValues = true, // default value
returnSimplified = false, // default value
returnDetailed = false, // default value
keysOnly = false, // default value
valuesOnly = false, // default value
} = booleans;
..... // block of code
}
at the time of calling the method do this:
// without third param
Compare.objects(obj1, obj2)
// with third param
Compare.objects(obj1, obj2, {
keysAndValues : true, // or false
returnSimplified : false, // or true
returnDetailed : false, // or true
keysOnly : false, // or true
valuesOnly : false, // or true
});

Vee Validate custom required_if rule doesn't computes required

I am using Vee-validate 2.2.3 on project and trying to use custom required_if rule.
The problem that it doesn't changes required flag on ValidationProvider to true, it always false, so user cannot see that some field became required.
At the same time - validation works well and error messages are shown\hidden when needed.
Examples of code:
this.$validator.extend('customRequiredIf', customRequiredIf, {
hasTarget: true,
computesRequired: true,
});
const customRequiredIf = (value: any, [target, operation, operationValue] : any) => {
let conditional = operationValue.length !== 0;
if (conditional) {
return {
valid: value !== undefined && value !== null && value !== "",
data: {
required: value !== undefined && value !== null && value !== "",
}
};
}
return {
valid: true,
data: {
required: true
}
};
};
What i am doing incorrectly?
Small demo (even though i have always return "required: true", flag "required" - always "false"):
https://codesandbox.io/s/vue-template-4vd30?file=/src/App.vue

update object properties from inside function

I'm trying to update the values in validations inside of the function it sets isValid to false however it doesn't update validations outside of the function, how can i do this?
export let validations = {
validate: null,
isValid: true,
validationMessage: ''
};
function validateInput(value) {
if (value == null || value.length === 0) {
const update = {...validations, isValid: false}
{console.log(bla)}
return update
}

Have you tried:
export let validations = {
validate: null,
isValid: true,
validationMessage: ''
};
function validateInput(value) {
if (value == null || value.length === 0) {
validations.isValid = false
}
}

Is it that you want the actual validations object to be intact and your validateInput function should return it's validation result
export let validations = {
validate: null,
isValid: true,
validationMessage: ''
};
function validateInput(value) {
const update = {...validations};
if (value == null || value.length === 0) {
update.isValid = false;
}
return update;
}
or something like
export let validations = {
validate: function(value){
if (value == null || value.length === 0) {
this.isValid = false;
this.validationMessage = 'No value'
}},
reset: function(){
this.isValid = true;
this.validationMessage = '';
},
isValid: true,
validationMessage: ''
};

Dynamic state is not getting updated in react

I am new to react js , here
this.state = {
technologies: [],
showLowError: false,
showHighError: false,
showMediumError: false
}
I have this state variables.
Now,
What I am trying to do is ,
if(type === "Low") {
errorState = "showLowError";
} else if(type === "Medium") {
errorState = "showMediumError";
} else {
errorState = "showHighError";
}
if (tobeupdated === "count") {
let validateData = this.validate(type, noc);
console.log("validateData is ==>", validateData);
this.setState({
[errorState]: validateData
})
}
update the state, depend upon some variables, Now,
[errorState] is not updating the exact value, Value for the state is not getting set.can any one help me with this ?

try adding:
this.setState(this.state);
after:
this.setState({
[errorState]: validateData
})