Multiple IF conditions inside filter - javascript

I want to filter a table (2d array) together with IF condition (depending on HTML select value) and use this code
transportRegFiltered = transportReg.filter(r =>
{if(lugarDe.value == "TODOS"){return true} else {return (r[6] == lugarDe.value)}
})
with 1 condition it works but I need to have several ones. Smth like
transportRegFiltered = transportReg.filter(r =>
{if(lugarDe.value == "TODOS"){return true} else {return (r[6] == lugarDe.value)}
if(lugarA.value == "TODOS"){return true} else {return (r[7] == lugarA.value)}
}
How can I do it?

You can return all the condition using OR operator. Because
if(A) { return true; } else { return B; }
if(C) { return true; } else { return D; }
Translates to
return A || B || C || D;
So you can write something like this inside the filter,
return ( lugarDe.value == "TODOS" || r[6] == lugarDe.value || lugarA.value == "TODOS" || r[7] == lugarA.value ... and all the other conditions );

I am not really clear what you want the if statements to do exactly, but one stab at it would be check the values and then checking the other conditions with ORs.
var isTodos = [lugarDe.value, lugarA.value].includes("TODOS");
return isTodos || r[6] == lugarDe.value || r[7] == lugarA.value;

Are you trying to apply each filter independently if the condition for that filter is taken? In that case you can cascade the filters:
transportRegFiltered = transportReg
.filter((r) => {
if (lugarDe.value == "TODOS") {
return true;
} else {
return r[6] == lugarDe.value;
}
})
.filter((r) => {
if (lugarA.value == "TODOS") {
return true;
} else {
return r[7] == lugarA.value;
}
});

You could take an array for checking the values.
transportRegFiltered = transportReg.filter(r => {
const values = [lugarDe.value, lugarA.value];
return values.includes("TODOS") || values.some((v, i) => v === r[i + 6]);
});

ok I did it in most simple and direct way. Just wanted to find some fancy one...
I just looped through all options of 3 inputs and assigned different filters for each combination including or excluding relevant filter condition
var transportRegFiltered;
if(lugarDe.value == "TODOS" && lugarA.value == "TODOS" && lotIdSearch.value.length == 0){
transportRegFiltered = transportReg}
else if (lugarDe.value == "TODOS" && lugarA.value == "TODOS" && lotIdSearch.value.length > 0) {
transportRegFiltered = transportReg.filter(r => (r[5]).toString().toLowerCase().startsWith(lotIdSearchValue))}
else if (lugarDe.value !== "TODOS" && lugarA.value == "TODOS" && lotIdSearch.value.length == 0) {
transportRegFiltered = transportReg.filter(r => r[6] == lugarDe.value)}
else if (lugarDe.value == "TODOS" && lugarA.value !== "TODOS" && lotIdSearch.value.length == 0) {
transportRegFiltered = transportReg.filter(r => r[7] == lugarA.value)}
else if (lugarDe.value !== "TODOS" && lugarA.value !== "TODOS" && lotIdSearch.value.length == 0) {
transportRegFiltered = transportReg.filter(r => r[6] == lugarDe.value && r[7] == lugarA.value)}
else if (lugarDe.value !== "TODOS" && lugarA.value == "TODOS" && lotIdSearch.value.length > 0) {
transportRegFiltered = transportReg.filter(r => r[6] == lugarDe.value && (r[5]).toString().toLowerCase().startsWith(lotIdSearchValue))}
else if (lugarDe.value == "TODOS" && lugarA.value !== "TODOS" && lotIdSearch.value.length > 0) {
transportRegFiltered = transportReg.filter(r => r[7] == lugarA.value && (r[5]).toString().toLowerCase().startsWith(lotIdSearchValue))}
else if (lugarDe.value !== "TODOS" && lugarA.value !== "TODOS" && lotIdSearch.value.length > 0) {
transportRegFiltered = transportReg.filter(r => r[6] == lugarDe.value && r[7] == lugarA.value && (r[5]).toString().toLowerCase().startsWith(lotIdSearchValue))}

Related

How to create correct multiple filter?

I am trying to show items of game and I want to filter my output results.
I have panel with multiple filters
And I don't know how to do it correct. Some filters are similar, maybe it should move to function.
I tried to do like this (for search by name and one filter), but I am not sure is it the best way or no?
filteredItems() {
if (this.activeFilter && this.activeFilter != "all") {
return this.items[this.activeFilter]
.filter(
item =>
item.name.toLowerCase().indexOf(this.search.toLowerCase()) !== -1
)
.filter(item => {
if (this.minLvl !== "" && this.maxLvl !== "") {
if (
item.itemLevel >= this.minLvl &&
item.itemLevel <= this.maxLvl
)
return true;
} else if (this.minLvl == "" && this.maxLvl !== "") {
if (item.itemLevel <= this.maxLvl) return true;
} else if (this.minLvl !== "" && this.maxLvl == "") {
if (item.itemLevel >= this.minLvl) return true;
} else {
return true;
}
});
}

How to optimize multiple filter?

I have big search panel with filters
In the computed section I use the next code
computed: {
filteredItems() {
if (this.activeFilter && this.activeFilter != 'all') {
return this.items[this.activeFilter]
.filter(item => item.name.toLowerCase().indexOf(this.search.toLowerCase()) !== -1)
.filter(item => item.itemLevel >= this.minLvl && item.itemLevel <= this.maxLvl);
} else {
let all = [];
let i;
if (this.items) {
for (i = 0; i < this.filters.length; i++) {
Array.prototype.push.apply(all, this.items[this.filters[i].value]);
}
}
return all
.filter(item => item.name.toLowerCase().indexOf(this.search.toLowerCase()) !== -1)
.filter(item => {
if (this.minLvl !== '' && this.maxLvl !== '') {
if (item.itemLevel >= this.minLvl && item.itemLevel <= this.maxLvl) return true;
} else if (this.minLvl == '' && this.maxLvl !== '') {
if (item.itemLevel <= this.maxLvl) return true;
} else if (this.minLvl !== '' && this.maxLvl == '') {
if (item.itemLevel >= this.minLvl) return true;
} else {
return true;
}
});
}
},
}
Here is I use one filter for min and max level. And when I will add more filter my code will be too big. Multiple filters can be active l at the same time.
How can I optimize my code?

Complex If statements; || not working as I hoped

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);
}

What is simpler way to achieve an if then else if else stack in javascript

Is there a way to simplify this or a more terse form i can use? The logic contained is all correct. It just seems like a lot of returns and else ifs.
mode = (function(mode, current, proposed, origins, destinations) {
if (mode === 'none') {
return 'project';
} else if (proposed.count === 0) {
return 'unseated';
} else if (current.count > proposed.count && proposed.count > 0) {
return 'reducing';
} else if (proposed.count === destinations.count && destinations.count > 1 && current.count === 0) {
return 'newplus';
} else if (proposed.count === destinations.count && current.count === 0) {
return 'new';
} else if (proposed.count > destinations.count) {
return 'increasing';
} else if (proposed.count === destinations.count && destinations.count > origins.count) {
return 'moveplus';
} else {
return 'move';
}
}(moves.register[staff].move, {count: mode.currentDesks}, {count: mode.proposedDesks}, {count: mode.origins}, {count: mode.destinations})));
I previously used a nested ternary which is marginally shorted but i would argue more prone to error and difficult to read (the results are marginally different due to code evolution not errors in replication):
mode =
(moves.register[staff].move === 'none') ? 'project' :
(mode.proposedDesks === 0) ? 'unseated' :
(mode.currentDesks > mode.proposedDesks && mode.proposedDesks > 0) ? 'reducing' :
(mode.proposedDesks === mode.destinations && mode.destinations > 1 && mode.currentDesks === 0) ? 'newplus' :
(mode.proposedDesks === mode.destinations && mode.currentDesks === 0) ? 'new' :
(mode.proposedDesks > mode.destinations) ? 'additional' :
(mode.proposedDesks === mode.destinations && mode.destinations === mode.origins) ? 'move' :
(mode.proposedDesks === mode.destinations && mode.destinations > mode.origins) ? 'moveplus' :
'other';
So while I like the if…then…elseif stack for legibility, it feels like it is more verbose than it could be. I don't think i'm looking for a switch…case version doesn't quite cut it due to the number of comparison variables, and it feels wrong to nest if statements within a switch…case or ternary operators within an if…then…else.
I think instinctively i'd like a form of matrix where the return values are in a grid and somehow a matrix calculation of the the various bitwise conditions returned the correct result. I suspect though that would be a win of compact code over legibility.
Any suggestions?
NB. The variable names including the addition of a count property to each instead of naming the variable as such or not indicating that it is a count are chosen for legibility.
you can use a var to store your choice and return it at the end
mode = (function(mode, current, proposed, origins, destinations) {
var varName='move';
if (mode === 'none') {
varName='project';
} else if (proposed.count === 0) {
varName='unseated';
} else if (current.count > proposed.count && proposed.count > 0) {
varName= 'reducing';
} else if (proposed.count === destinations.count && destinations.count > 1 && current.count === 0) {
varName= 'newplus';
} else if (proposed.count === destinations.count && current.count === 0) {
varName='new';
} else if (proposed.count > destinations.count) {
varName= 'increasing';
} else if (proposed.count === destinations.count && destinations.count > origins.count) {
varName= 'moveplus';
}
}(moves.register[staff].move, {count: mode.currentDesks}, {count: mode.proposedDesks}, {count: mode.origins}, {count: mode.destinations})));

JavaScript conditions

If someone could point out what I'm doing wrong I'd be eternally grateful! I can't seem to get the right combination of parenthesis - how to I combine multiple conditions in one statement?? Obviously I don't expect anyone to modify the code below, I just want to show what I'm trying to achieve.
If someone can explain the logic to me that'd be great
Thanks
function ChangeButton()
{
if
((document.forms[0].IPR.value == "") && (document.forms[0].FNM1.value == "") && (document.forms[0].FNM1.value == "") && (document.forms[0].SURN.value == "") && (document.forms[0].GEND.value == "") && (document.forms[0].DOB.value == "") && (document.forms[0].CRIM.value == "") && (document.forms[0].ETHC.value == "") && (document.forms[0].DSBC.value == "") && (document.forms[0].MARK1.value == "") && (document.forms[0].NATC.value == "") && (document.forms[0].COBC.value == "") && (document.forms[0].COD.value == "") && (document.forms[0].FIVE.value == "") && (document.forms[0].PERM.value == "") && (document.forms[0].VISF.value == "") && (document.forms[0].USD.value == "") && (document.forms[0].HAD1.value == "") && (document.forms[0].HAD3.value == "") && (document.forms[0].HTEL.value == "") && (document.forms[0].HAEM.value == "") && (document.forms[0].FEES.value == "") && (document.forms[0].REF1TIT.value == "") && (document.forms[0].REF1ORG.value == "") && (document.forms[0].REF1POS.value == "") && (document.forms[0].REF1AL1.value == "") && (document.forms[0].REF1AL3.value == "") && (document.forms[0].REF1AL5.value == "") && (document.forms[0].REF1EMA.value == "") && (document.forms[0].DISC.value == ""))
&&
((document.forms[0].PERM.value == "") && (document.forms[0].FIVE.value == "N"))
&&
((document.forms[0].AGNT.value == "") && (document.forms[0].USD.value == "Y"))
&&
((document.forms[0].CSTRT.value == "") && (document.forms[0].USD.value == "N") && (document.forms[0].CENDD.value == "") && (document.forms[0].CAD1.value == "") && (document.forms[0].CAD3.value == "") && (document.forms[0].CAD4.value == "") && (document.forms[0].CAPC.value == "") && (document.forms[0].CTEL.value == ""))
&&
((document.forms[0].AWDB.value == "") && (document.forms[0].FEES.value == "") && (document.forms[0].FEES.value == "Private Funds Self or Family") && (document.forms[0].AWDS.value == ""))
&&
((document.forms[0].RESEARCH.value == "Y") && (document.forms[0].RESSRT.value == "") && (document.forms[0].RESMOA.value == "") && (document.forms[0].RESAR.value == "") && (document.forms[0].RESDIS.value == ""))
{
document.getElementById('submitbutton').className = 'enabled';
}
else {
document.getElementById('submitbutton').className = 'disabled';
}
}
I see
...&&... document.forms[0].FIVE.value == ""
...&&... document.forms[0].FIVE.value == "N"
This never be true
EDIT
I think you must change approach, try something like this:
function ChangeButton()
{
var frm = document.forms[0];
var neverEmpty = ['field1','field2','field3'];
var mustBe = {field3:'Y', field4:'N'};
var status = 'ok';
for(var i = 0; i<neverEmpty.length; i++) {
if(frm[neverEmpty[i]] == '') {
status = 'ko';
break;
}
}
for(myField in mustBe) {
if(frm[myfield] != mustBe[myField]) {
status = 'ko';
break;
}
}
document.getElementById('submitbutton').className = status=='ok'? 'enabled' : 'disabled';
}
you don't close the brackets
if (document.forms[0].IPR.value == "" && document.forms[0].FNM1.value == "" && ect...)
it's that simple
You need one more set of parentheses around the whole lot i.e. if (a == b) { .. }
As far as I can see, you don't need any parentheses here (except for those that are required by if syntax).
if(document.forms[0].IPR.value == "" && document.forms[0].FNM1.value == "" &&
document.forms[0].PERM.value == "" && document.forms[0].FIVE.value == "N" &&
...
) {
document.getElementById('submitbutton').className = 'enabled';
} else {
document.getElementById('submitbutton').className = 'disabled';
}
Give the input elements that must be non-empty a "class" attribute. Then find all those elements using that instead of writing that insanely ugly code.
You need 1 more paren before and before the first curly brace everything if ( ... ) { ... }
Here is the corrected code.
function ChangeButton()
{
if
((document.forms[0].IPR.value == "") && (document.forms[0].FNM1.value == "") && (document.forms[0].FNM1.value == "") && (document.forms[0].SURN.value == "") && (document.forms[0].GEND.value == "") && (document.forms[0].DOB.value == "") && (document.forms[0].CRIM.value == "") && (document.forms[0].ETHC.value == "") && (document.forms[0].DSBC.value == "") && (document.forms[0].MARK1.value == "") && (document.forms[0].NATC.value == "") && (document.forms[0].COBC.value == "") && (document.forms[0].COD.value == "") && (document.forms[0].FIVE.value == "") && (document.forms[0].PERM.value == "") && (document.forms[0].VISF.value == "") && (document.forms[0].USD.value == "") && (document.forms[0].HAD1.value == "") && (document.forms[0].HAD3.value == "") && (document.forms[0].HTEL.value == "") && (document.forms[0].HAEM.value == "") && (document.forms[0].FEES.value == "") && (document.forms[0].REF1TIT.value == "") && (document.forms[0].REF1ORG.value == "") && (document.forms[0].REF1POS.value == "") && (document.forms[0].REF1AL1.value == "") && (document.forms[0].REF1AL3.value == "") && (document.forms[0].REF1AL5.value == "") && (document.forms[0].REF1EMA.value == "") && (document.forms[0].DISC.value == "")
&&
((document.forms[0].PERM.value == "") && (document.forms[0].FIVE.value == "N"))
&&
((document.forms[0].AGNT.value == "") && (document.forms[0].USD.value == "Y"))
&&
((document.forms[0].CSTRT.value == "") && (document.forms[0].USD.value == "N") && (document.forms[0].CENDD.value == "") && (document.forms[0].CAD1.value == "") && (document.forms[0].CAD3.value == "") && (document.forms[0].CAD4.value == "") && (document.forms[0].CAPC.value == "") && (document.forms[0].CTEL.value == ""))
&&
((document.forms[0].AWDB.value == "") && (document.forms[0].FEES.value == "") && (document.forms[0].FEES.value == "Private Funds Self or Family") && (document.forms[0].AWDS.value == ""))
&&
((document.forms[0].RESEARCH.value == "Y") && (document.forms[0].RESSRT.value == "") && (document.forms[0].RESMOA.value == "") && (document.forms[0].RESAR.value == "") && (document.forms[0].RESDIS.value == "")))
{
document.getElementById('submitbutton').className = 'enabled';
}
else {
document.getElementById('submitbutton').className = 'disabled';
}
}
USE and IDE, it will make ur life simple.. Cheers to Eclipse IDE :)

Categories

Resources