I want to filter React components by name and values.
this is the array i want to filter
let filteredArray: any[] = []
const filteredItems: any[] = eventList.filter(
(event) =>
event.props.children.props.printEvent.labels === null &&
event.props.children.props.printEvent.value === true &&
event.props.children.props.printEvent.notes === null &&
(event.props.children.props.printEvent && event.props.children.props.printEvent.name === 'control_fault') ||
(event.props.children.props.printEvent.name === 'running' && event.props.children.props.printEvent.value === false) ||
(event.props.children.props.printEvent.name === 'safety_chain' && event.props.children.props.printEvent.value === false) ||
(event.props.children.props.printEvent.name === 'torch_collision' && event.props.children.props.printEvent.value === true) ||
(event.props.children.props.printEvent.name === 'motion_sup' && event.props.children.props.printEvent.value === true) ||
(event.props.children.props.printEvent.name === 'e_stop' && event.props.children.props.printEvent.value === true)
)
if (filteredItems) {
filteredArray.push([...filteredItems])
}
ui.setUnlabeledCount(filteredItems.length)
console.log(eventList, filteredArray, filteredItems, ui.unlabeledCount)
is there another way or to write this? dont want to be using props.children all the time
You should have a look at destructuring object in ES6 so that you don't have to re-write props.children all the time like above
Here is the reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
const filteredItems: any[] = eventList.filter(
({ props: {children: {props: {printEvent}}}}) =>
printEvent.labels === null &&
printEvent.value === true &&
printEvent.notes === null &&
(printEvent && printEvent.name === 'control_fault') ||
(printEvent.name === 'running' && printEvent.value === false) ||
(printEvent.name === 'safety_chain' && printEvent.value === false) ||
(printEvent.name === 'torch_collision' && printEvent.value === true) ||
(printEvent.name === 'motion_sup' && printEvent.value === true) ||
(printEvent.name === 'e_stop' && printEvent.value === true)
)
Related
I have an if-statement: if all the properties of an object have values, then the next button will be enabled.
const handleButton = () => {
if(
values.streetAdress !== ""
&& values.postalCode !== ""
&& values.city !== ""
&& values.sex !== ""
&& values.birthName !== ""
&& values.birthPlace !== ""
&& values.birthday !== ""
&& values.country !== ""
&& values.family !== ""
&& values.insuranceID !== ""
){
setDisabeld(false)
}else{
setDisabeld(true)
}
Is there a way to shorten this expression, so all properties will be checked at once?
you can use the Array.prototype.every() method on the values of the object.
const isNotEmpty = Object.values(values).every((v) => v !== '')
if(isNotEmpty) {
setDisabeld(false)
} else{
setDisabeld(true)
}
so I'm trying to filter results using multiple filter options. ive tried a lot of different things and it works as intended with just 2 filters applied, but if i apply 3 or more filters to a search it will add more results to the search that don't match all the criteria.
meaning the more filters applied, the narrower the results should get distilled down to.
here is a gif showing what happens. https://imgur.com/a/gAX3ntA
here is the code I'm currently using. its bloated beyond all hell as I would have to think there is a simpler way to do this with compounding filters. plus if I want to add more filter options this way of doing things would quickly get insanely over complicated. please tell me there is a simpler way to do this lol.
I'm using VUE 3 with the composition API.
const months = computed(() => {
return documents.value.filter((plants) =>
plants.months.includes(month.value)
);
});
const plantType = computed(() => {
return documents.value.filter(
(plants) => plants.plantType == plantT.value
);
});
const Zone = computed(() => {
return documents.value.filter((plants) =>
plants.Zone.includes(getZone.value)
);
});
const toxicPets = computed(() => {
return documents.value.filter((plants) =>
plants.toxicPets.includes(toxic.value)
);
});
const Combined = computed(() => {
gettingThree = false;
return documents.value.filter(
(plants) =>
plants.Zone.includes(getZone.value) &&
plants.months.includes(month.value) &&
plants.plantType == plantT.value &&
plants.toxicPets.includes(toxic.value)
);
});
const Combined2 = computed(() => {
gettingTwo = true;
gettingThree = false;
return documents.value.filter(
(plants) =>
(plants.Zone.includes(getZone.value) &&
plants.months.includes(month.value)) ||
(plants.Zone.includes(getZone.value) &&
plants.plantType == plantT.value) ||
(plants.Zone.includes(getZone.value) &&
plants.toxicPets.includes(toxic.value)) ||
(plants.months.includes(month.value) &&
plants.toxicPets.includes(toxic.value)) ||
(plants.plantType == plantT.value &&
plants.toxicPets.includes(toxic.value)) ||
(plants.plantType == plantT.value &&
plants.months.includes(month.value))
);
});
const Combined3 = computed(() => {
gettingTwo = false;
gettingThree = true;
return documents.value.filter(
(plants) =>
(plants.Zone.includes(getZone.value) &&
plants.plantType == plantT.value &&
plants.months.includes(month.value)) ||
(plants.Zone.includes(getZone.value) &&
plants.toxicPets.includes(toxic.value) &&
plants.plantType == plantT.value) ||
(plants.Zone.includes(getZone.value) &&
plants.months.includes(month.value) &&
plants.toxicPets.includes(toxic.value)) ||
(plants.plantType == plantT.value &&
plants.months.includes(month.value) &&
plants.toxicPets.includes(toxic.value))
);
});
const searchMatch = computed(() => {
if (Combined.value.length > 0) {
console.log("getting 4");
return Combined.value.filter(
(plant) =>
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
}
if (Combined3.value.length > 0 && gettingTwo == false) {
console.log("getting 3");
return Combined3.value.filter(
(plant) =>
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
}
if (Combined2.value.length > 0 && gettingThree == false) {
console.log("getting 2");
return Combined2.value.filter(
(plant) =>
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
}
if (
month.value !== null &&
getZone.value == null &&
toxic.value == null &&
plantT.value == null
) {
return months.value.filter(
(plant) =>
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
}
if (
getZone.value !== null &&
plantT.value == null &&
month.value == null &&
toxic.value == null
) {
return Zone.value.filter(
(plant) =>
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
}
if (
plantT.value !== null &&
month.value == null &&
getZone.value == null &&
toxic.value == null
) {
return plantType.value.filter(
(plant) =>
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
}
if (
toxic.value !== null &&
plantT.value == null &&
month.value == null &&
getZone.value == null
) {
return toxicPets.value.filter(
(plant) =>
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
}
return documents.value.filter((plant) => {
return (
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
});
});
holy crap I figured it out on my own.
my solution is now WAY simpler than the solution I was working with in the OP and gives the desired results. see the gif to see how it works now.
gif - https://imgur.com/mY8XksT
here is the code I came up with.
//if a variable is null move on to the next filter or if the variable has a
//value then filter the results to include the value and move to the next
//filter. rinse and repeat for each filter.
const Combined = computed(() => {
return documents.value
.filter((plants) => {
return getZone.value == null || plants.Zone.includes(getZone.value);
})
.filter((plants) => {
return month.value == null || plants.months.includes(month.value);
})
.filter((plants) => {
return (
plantT.value == null || plants.plantType.includes(plantT.value)
);
})
.filter((plants) => {
return toxic.value == null || plants.toxicPets.includes(toxic.value);
});
});
//below takes the Combined filters property from above and runs it though another computed property to allow the user to type search in
//a input field. im running the search results through an array of multiple names per item since plants tend to have more than one name. so
//the user can search a varity of different names and still get a result that is correct.
const searchMatch = computed(() => {
return Combined.value.filter((plant) => {
let arr_lower = plant.otherNames.map(
(item) => item.toLowerCase().indexOf(search.value.toLowerCase()) != -1
); //this function just returns true of false if the item matches the search results.
return arr_lower.includes(true); //so here im just returning the arr_lower variable if it includes true.
});
});
The following Javascript is attached to a field form (on change ) it is supposed to ensure that if the user clicks on a button then 'off site' will populate in activity_type. And if not then '95 Modifier' will appear. In addition this form sheet has a field I have checked 'required' yet what is happening is the user is able to enter blanks for activity type. Is there a way within this javascript to then not allow a blank to be entered?
if (getFormElement('activity_type_id').toUpperCase()=='EE641670-8BE3-49FD-8914-030740D9DE72'
&& getFormElement('actual_location').toUpperCase()!='5E74C25C-6363-46BE-B030-16216B364F5A')
{
setFormElement('is_off_site',true);
} else
{
setFormElement('is_off_site',false);
}
{
setFormElement('is_off_site',false);
}
For your requirement custom function might solve your issue. It might cover almost your all primary scenarios. I have tried my best to update an answer with the best possibilities.
Please review it.
function isEmpty(inputValue) {
if(typeof inputValue === 'string' && (inputValue === '0' || inputValue === 'false' || inputValue === '[]' || inputValue === '{}' || inputValue === '')){
return true;
}else if(Array.isArray(inputValue) === true){
return inputValue.length === 0 ? true : false;
}else if(Array.isArray(inputValue) === false && (typeof inputValue === 'object' && inputValue !== null) && typeof inputValue !== 'undefined' && typeof inputValue !== null){
return Object.keys(inputValue).length === 0 ? true : false;
}else if(typeof inputValue === 'undefined'){
return true;
}else if(inputValue === null){
return true;
}else if(typeof inputValue === 'number' && inputValue === 0){
return true;
}else if(inputValue === false){
return true;
}else if(inputValue.length > 0 && inputValue.trim().length === 0){
return true;
}
return false;
}
console.log("isEmpty(' '): ",isEmpty(' '));
console.log("isEmpty(''): ",isEmpty(''));
console.log("isEmpty([]): ",isEmpty([]));
console.log("isEmpty({}): ",isEmpty({}));
console.log("isEmpty(): ",isEmpty());
const nullValue = null;
console.log("isEmpty(null): ",isEmpty(nullValue));
console.log("isEmpty(0): ",isEmpty(0));
console.log("isEmpty(false): ",isEmpty(false));
console.log("isEmpty('0'): ",isEmpty('0'));
console.log("isEmpty('false'): ",isEmpty('false'));
console.log("isEmpty('[]'): ",isEmpty('[]'));
console.log("isEmpty('{}') ",isEmpty('{}'));
console.log("isEmpty(''): ",isEmpty(''));
console.log("isEmpty('0.0'): ",isEmpty(0.0));
I feel like this is a really dumb question but my brain is fried. Right now I'm working on a very complex set of if and else statements and I'm wondering if there is an easier way? I originally tried or statements but that didn't give me the desired result.
if(fields[0].value === '' && fields[1].value === '' && fields[2].value === '' && fields[3].value === '' ) {
clusterGroup.addLayer(layer);
} else if(fields[0].value === '' && fields[1].value === city && fields[2].value === '' && fields[3].value === '') {
clusterGroup.addLayer(layer);
} else if(fields[0].value === state && fields[1].value === '' && fields[2].value === '' && fields[3].value === '') {
clusterGroup.addLayer(layer);
} else if(fields[0].value === state && fields[1].value === city && fields[2].value === '' && fields[3].value === ''){
clusterGroup.addLayer(layer);
} else if(fields[0].value === '' && fields[1].value === '' && (fields[2].value <= sq && sq != null) && fields[3].value === '') {
clusterGroup.addLayer(layer);
} else if(fields[0].value === '' && fields[1].value === '' && fields[2].value === '' && (fields[3].value >= sq && sq != null)) {
clusterGroup.addLayer(layer);
} else if(fields[0].value === '' && fields[1].value === city && (fields[2].value <= sq && sq != null) && fields[3].value === ''){
clusterGroup.addLayer(layer);
} else if(fields[0].value === state && fields[1].value === '' && fields[2].value === '' && (fields[3].value >= sq && sq != null)){
clusterGroup.addLayer(layer);
} else if(fields[0].value === state && fields[1].value === city && (fields[2].value <= sq && sq != null) && fields[3].value === ''){
clusterGroup.addLayer(layer);
} else if(fields[0].value === state && fields[1].value === city && fields[2].value === '' && (fields[3].value >= sq && sq != null)){
clusterGroup.addLayer(layer);
} else if(fields[0].value === state && fields[1].value === city && (fields[2].value <= sq && sq != null) && (fields[3].value >= sq && sq != null)){
clusterGroup.addLayer(layer);
}
Thank you in advanced.
I don't know how did you use OR Statement (||) but you can use one if statement.
if(
(fields[0].value === '' && fields[1].value === '' && fields[2].value === '' && fields[3].value === '') ||
(fields[0].value === '' && fields[1].value === city && fields[2].value === '' && fields[3].value === '') ||
(fields[0].value === state && fields[1].value === '' && fields[2].value === '' && fields[3].value === '') ||
(fields[0].value === state && fields[1].value === city && fields[2].value === '' && fields[3].value === '') ||
(fields[0].value === '' && fields[1].value === '' && (fields[2].value <= sq && sq != null) && fields[3].value === '') ||
(fields[0].value === '' && fields[1].value === '' && fields[2].value === '' && (fields[3].value >= sq && sq != null)) ||
(fields[0].value === '' && fields[1].value === city && (fields[2].value <= sq && sq != null) && fields[3].value === '') ||
(fields[0].value === state && fields[1].value === '' && fields[2].value === '' && (fields[3].value >= sq && sq != null)) ||
(fields[0].value === state && fields[1].value === city && (fields[2].value <= sq && sq != null) && fields[3].value === '') ||
(fields[0].value === state && fields[1].value === city && fields[2].value === '' && (fields[3].value >= sq && sq != null)) ||
(fields[0].value === state && fields[1].value === city && (fields[2].value <= sq && sq != null) && (fields[3].value >= sq && sq != null))
){
clusterGroup.addLayer(layer);
}
Try restructuring it into something like this
if (sq != null) {
if (fields[3].value >= sq &&
fields[2].value <= sq &&
fields[0].value === state &&
field[1].value === city) {
clusterGroup.addLayer(layer);
} else if (fields[3].value >= sq) {
if ((fields[0].value === state) ||
(fields[0].value === state && field[1].value === city) ||
(fields[0].value === '' &&
field[1].value === '')) {
clusterGroup.addLayer(layer);
}
} else if (fields[2].value <= sq) {
if ((fields[1].value === city) ||
(fields[0].value === state && field[1].value === city) ||
(fields[0].value === '' && field[1].value === '')) {
clusterGroup.addLayer(layer);
}
}
} else if ((fields[1].value === '' && fields[0].value === state) ||
(fields[0].value === '' && fields[1].value === city) ||
(fields[0].value === state && fields[1].value === city)) {
clusterGroup.addLayer(layer);
}
I made a function that should display an error or remove an error.
Unfortunately, when I use the function in any way, for example like displayError(true, "test");, it's not working.
When I check my html code to see if anything changes, nothing is changed.
function displayError(display, string, xhr) {
$("div#error").fadeOut(300, function() {
if(arguments.length == 1 && typeof display === "boolean" && display == false) {
//do nothing
} else if(arguments.length == 2 && typeof display === "boolean" && display == true && typeof string == "string") {
$("div#error").html('<b style="color: #ce1919;">(!)</b> '+string).fadeIn(300);
} else if(arguments.length == 3 && typeof display === "boolean" && display == true && typeof string == "string" && typeof xhr === "object") {
$("div#error").html('<b style="color: #ce1919;">('+xhr.status+")</b> "+string).fadeIn(300);
}
});
}
Anybody who can identify the problems?
use typeof:
typeof display === "boolean"
typeof xhr === "object"
MDN typeof Reference
I found out about the console log method. So I tried to check if my function was fired at all and it was. But then I found that the arguments array was just empty, which meant that the parameters were not available in the callback. So I stored the arguments in a variable and then used that variable in my if statements in the callback.
Like so:
function displayError(display, string, xhr) {
var args = arguments;
$("div#error").fadeOut(300, function() {
if(args.length == 1 && typeof display === "boolean" && display == false) {
//do nothing
} else if(args.length == 2 && typeof display === "boolean" && display == true && typeof string == "string") {
$("div#error").html('<b style="color: #ce1919;">(!)</b> '+string).fadeIn(300);
} else if(args.length == 3 && typeof display === "boolean" && display == true && typeof string == "string" && typeof xhr === "object") {
$("div#error").html('<b style="color: #ce1919;">('+xhr.status+")</b> "+string).fadeIn(300);
}
});
}