I have a very long if-conditional statement. How can I minimize it?
Here is my code,
if(this.refs.category.value.trim() != "" &&
this.refs.decisive_min.value.trim() != "" && this.refs.decisive_max.value.trim() != "" &&
this.refs.interactive_min.value.trim() != "" && this.refs.interactive_max.value.trim() != "" &&
this.refs.stabilizing_min.value.trim() != "" && this.refs.stabilizing_max.value.trim() != "" &&
this.refs.cautious_min.value.trim() != "" && this.refs.cautious_max.value.trim() != "" &&
this.refs.aesthetic_min.value.trim() != "" && this.refs.aesthetic_max.value.trim() != "" &&
this.refs.economic_min.value.trim() != "" && this.refs.economic_max.value.trim() != "" &&
this.refs.individualistic_min.value.trim() != "" && this.refs.individualistic_max.value.trim() != "" &&
this.refs.political_min.value.trim() != "" && this.refs.political_max.value.trim() != "" &&
this.refs.altruist_min.value.trim() != "" && this.refs.altruist_max.value.trim() != "" &&
this.refs.regulatory_min.value.trim() != "" && this.refs.regulatory_max.value.trim() != "" &&
this.refs.theoretical_min.value.trim() != "" && this.refs.theoretical_max.value.trim() != ""){
var data = {category:this.refs.category.value.trim()};
data.decisive_min = this.refs.decisive_min.value.trim();
data.decisive_max = this.refs.decisive_max.value.trim();
data.interactive_min = this.refs.interactive_min.value.trim();
data.interactive_max = this.refs.interactive_max.value.trim();
data.stabilizing_min = this.refs.stabilizing_min.value.trim();
data.stabilizing_max = this.refs.stabilizing_max.value.trim();
data.cautious_min = this.refs.cautious_min.value.trim();
data.cautious_max = this.refs.cautious_max.value.trim();
data.aesthetic_min = this.refs.aesthetic_min.value.trim();
data.aesthetic_max = this.refs.aesthetic_max.value.trim();
data.economic_min = this.refs.economic_min.value.trim();
data.economic_max = this.refs.economic_max.value.trim();
data.individualistic_max = this.refs.individualistic_max.value.trim();
data.individualistic_min = this.refs.individualistic_min.value.trim();
data.political_min = this.refs.political_min.value.trim();
data.political_max = this.refs.political_max.value.trim();
data.altruist_min = this.refs.altruist_min.value.trim();
data.altruist_max = this.refs.altruist_max.value.trim();
data.regulatory_min = this.refs.regulatory_min.value.trim();
data.regulatory_max = this.refs.regulatory_max.value.trim();
data.theoretical_min = this.refs.theoretical_min.value.trim();
data.theoretical_max = this.refs.theoretical_max.value.trim();
I just want to check all the values in the form if they are all not empty string.
I used refs by React JS in Meteor.
You could use an array with the wanted keys. Then take only one loop for assigning and checking.
If all values are truthy, data contains the trimmed values, otherwise it is undefined.
var keys = ['category', 'decisive_min', 'decisive_max', 'interactive_min', 'interactive_max', 'stabilizing_min', 'stabilizing_max', 'cautious_min', 'cautious_max', 'aesthetic_min', 'aesthetic_max', 'economic_min', 'economic_max', 'individualistic_min', 'individualistic_max', 'political_min', 'political_max', 'altruist_min', 'altruist_max', 'regulatory_min', 'regulatory_max', 'theoretical_min', 'theoretical_max'],
data = {};
data = keys.every(function (k) {
return data[k] = this.refs[k].value.trim();
}, this) && data || undefined;
Using ES2015, you can do something like that :
Inside your component
const fields = getFields(this.refs);
if (checkFieldsNotEmpty(fields)) {
const data = {category:this.refs.category.value.trim()};
fields.forEach(field => {
data[`${field.name}_min`] = field.valueMin;
data[`${field.name}_max`] = field.valueMax;
});
// ...
}
Outside your component (can be static methods)
const fieldNames = [
'decisive',
'interactive',
'stabilizing',
// ...
];
const getFields = refs => fieldNames.map(name => ({
name,
valueMin: refs[`${fieldName}_min`].value.trim(),
valueMax: refs[`${fieldName}_max`].value.trim()
}));
const checkFieldsNotEmpty = fields => {
for (let field of fields) {
if (field.valueMin === '' || field.valueMax === '') {
return false
}
}
return true;
};
Try using
for (var property in this.refs) {
if (this.refs.hasOwnProperty(property)) {
// perform a null check
if(this.refs[property]){
//perform operaion
data[property] = this.refs[property].trim();
}
}
}
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)
}
I'm having trouble excluding items from an Array.push(), I've got something that seems to work, but worry for performance reasons that this may not be the best way to do it:
this.iframe_settings = (localStorage.getItem('iframe_settings') != null) ? JSON.parse(localStorage.getItem('iframe_settings')) : null
var _i = this,
iframeSource = []
const isAffIdSet = (_i.iframe_settings && _i.iframe_settings['cpm_id'] != '' && _i.iframe_settings['cpm_id'] != null) ? true : false
const isSubIdSet = (_i.iframe_settings && _i.iframe_settings['sub_id'] != '' && _i.iframe_settings['sub_id'] != null) ? true : false
Object.keys(this.iframe_settings).forEach(function(key) {
if (key != 'target') {
if (key == 'sub_id') {
if (isAffIdSet && !isSubIdSet) {
_i.iframe_settings['cpm_id'] = _i.iframe_settings['cpm_id']
} else if (isAffIdSet && isSubIdSet) {
_i.iframe_settings['cpm_id'] = `${_i.iframe_settings['cpm_id']}|flex_repay,${_i.iframe_settings['sub_id']}`
} else if (isAffIdSet && !isSubIdSet) {
_i.iframe_settings['cpm_id'] = _i.iframe_settings['cpm_id']
} else {
_i.iframe_settings['cpm_id'] = 'flex_repay'
}
}
iframeSource.push(`&${key}=${_i.iframe_settings[key]}`);
}
});
My code saves an object to iframe_settings, which is null by default. I'd to exclude &target=X from the list of keys retrieved?
I have set a validation for undefined here below in my javascript code. Even if the value is undefined it is going inside the if condition
if (VSATSaving.PANORAMIC_IMAGES != 'undefined' || VSATSaving.PANORAMIC_IMAGES != "") {
VSATSaving.PANORAMIC_IMAGES = lstPanaromicImages.join();
}
update
Updated code
var PANAROMIC_120 = $(document.getElementById('ImgPanaromic120')).data('imagename');
if (PANAROMIC_120 != "" && PANAROMIC_120 != undefined)
lstPanaromicImages.push(PANAROMIC_120);
var PANAROMIC_150 = $(document.getElementById('ImgPanaromic150')).data('imagename');
if (PANAROMIC_150 != "" && PANAROMIC_150 != undefined)
lstPanaromicImages.push(PANAROMIC_150);
var PANAROMIC_180 = $(document.getElementById('ImgPanaromic180')).data('imagename');
if (PANAROMIC_180 != "" && PANAROMIC_180 != undefined)
lstPanaromicImages.push(PANAROMIC_180);
var PANAROMIC_210 = $(document.getElementById('ImgPanaromic210')).data('imagename');
if (PANAROMIC_210 != "" && PANAROMIC_210 != undefined)
lstPanaromicImages.push(PANAROMIC_210);
var PANAROMIC_240 = $(document.getElementById('ImgPanaromic240')).data('imagename');
if (PANAROMIC_240 != "" && PANAROMIC_240 != undefined)
lstPanaromicImages.push(PANAROMIC_240);
if (VSATSaving.PANORAMIC_IMAGES != undefined || VSATSaving.PANORAMIC_IMAGES != "") {
VSATSaving.PANORAMIC_IMAGES = lstPanaromicImages.join();
}
You used an OR operator. This means that if the VSATSaving.PANORAMIC_IMAGES value is undefined, it is still different from "", that's why the if statement is true.
Just replace the OR operator by an AND:
if (VSATSaving.PANORAMIC_IMAGES !== undefined && VSATSaving.PANORAMIC_IMAGES !== "") {
VSATSaving.PANORAMIC_IMAGES = lstPanaromicImages.join();
}
Note that I removed the single quotes around the undefined keyword.
you can use isNaN function in javascript.
if (!isNaN(VSATSaving.PANORAMIC_IMAGES)) {
VSATSaving.PANORAMIC_IMAGES = lstPanaromicImages.join();
}
if you are using "use strict" in your document then you can use the following way to check:
if (typeof PANAROMIC_120 != "undefined" && PANAROMIC_120 != "")
lstPanaromicImages.push(PANAROMIC_120);
Note that I am using quotes over undefined when I have added typeof
Check undefined condition like as follows
var PANAROMIC_120 = $(document.getElementById('ImgPanaromic120')).data('imagename');
if (PANAROMIC_120 != "" && typeof(PANAROMIC_120) != "undefined")
lstPanaromicImages.push(PANAROMIC_120);
var PANAROMIC_150 = $(document.getElementById('ImgPanaromic150')).data('imagename');
if (PANAROMIC_150 != "" && typeof(PANAROMIC_150) != "undefined")
lstPanaromicImages.push(PANAROMIC_150);
var PANAROMIC_180 = $(document.getElementById('ImgPanaromic180')).data('imagename');
if (PANAROMIC_180 != "" && typeof(PANAROMIC_180) != "undefined")
lstPanaromicImages.push(PANAROMIC_180);
var PANAROMIC_210 = $(document.getElementById('ImgPanaromic210')).data('imagename');
if (PANAROMIC_210 != "" && typeof(PANAROMIC_210) != "undefined")
lstPanaromicImages.push(PANAROMIC_210);
var PANAROMIC_240 = $(document.getElementById('ImgPanaromic240')).data('imagename');
if (PANAROMIC_240 != "" && typeof(PANAROMIC_240) != "undefined")
lstPanaromicImages.push(PANAROMIC_240);
if (typeof(VSATSaving.PANORAMIC_IMAGES) != "undefined" || VSATSaving.PANORAMIC_IMAGES != "") {
VSATSaving.PANORAMIC_IMAGES = lstPanaromicImages.join();
}
At the moment I'm setting my default values this way:
var ls = localStorage.get('app')
if (ls && typeof ls.installDate !== typeof undefined) { var installDate = ls.installDate } else { var installDate = false }
if (ls && typeof ls.settingsTab !== typeof undefined) { var settingsTab = ls.settingsTab } else { var settingsTab = '' }
if (ls && typeof ls.aboutTab !== typeof undefined) { var aboutTab = ls.aboutTab } else { var aboutTab = true }
plus extra 30 other values. I'm thinking if there is a better (shorter) way to solve this type of approach.
You can do the short cut in script as :
var ls = localStorage.get('app');
You can do like :
var installDate = (ls && ls.installDate) || false;
var settingsTab = (ls && ls.settingsTab) || false;
var aboutTab = (ls.aboutTab) || false;
I have a form which takes six inputs (there are more but only these matter for now)
original fare
original tax
new fare
new tax
fee
number of guests
when "Calculate" is pressed I use javascript to add original fare
and original tax to get the original total
then I add new fare and new tax to get the new total
now I compare original total to new total
if original total is greater than new total it should use one if several methods to finish doing the math I need and set the results to the display
i was originally testing everything using these values:
original fare = 1000
original tax = 200
new fare = 800
new tax = 200
fee = 150
number of guests = 3
which can bee seen here https://pnrbuilder.com/_popups/exchangeMyPNR_MATH_TEST_2.php
(page only works in chrome)
the above works exactly as expected but when I change the values to:
original fare = 949.83
original tax = 321.18
new fare = 453.91
new tax = 143.91
fee = 150
number of guests = 3
seen here https://pnrbuilder.com/_popups/exchangeMyPNR_MATH_TEST.php
(page only works in chrome)
this test uses the wrong if statement to finish out the rest of the math
I dont understand why this is happening as original total is still > new total so it should use the same method as the first example. I put in alerts to let me know exactly which if statement is being used to do the math and clearly the wrong one is used here but I just cant figure out why.
I know this is convoluted but could someone please help me figure out where my logic goes wrong?
Here's the full function:
function addMe(frm) {
var orBase = Number(frm.box1.value);
var orTax = Number(frm.box2.value);
var nwBase = Number(frm.box3.value);
var nwTax = Number(frm.box4.value);
var fee = Number(frm.fee.value);
var gsts = Number(frm.guests.value);
var fltrd_orBase = orBase * 100;
var fltrd_orTax = orTax * 100;
var fltrd_orTtl = fltrd_orBase + fltrd_orTax;
var orTtl = fltrd_orTtl / 100;
var final_orTtl = orTtl.toFixed(2)
frm.result.value = orTtl.toFixed(2)
var fltrd_nwBase = nwBase * 100;
var fltrd_nwTax = nwTax * 100;
var fltrd_nwTtl = fltrd_nwBase + fltrd_nwTax;
var nwTtl = fltrd_nwTtl / 100;
var final_nwTtl = nwTtl.toFixed(2)
frm.result2.value = nwTtl.toFixed(2)
var e = document.getElementById("residual");
var selectVal = e.options[e.selectedIndex].value;
if (final_orTtl <= final_nwTtl) {
document.getElementById("forfeitTable").style.display="none";
document.getElementById("MCOtable").style.display="none";
var undiff = final_nwTtl - final_orTtl;
var diff =undiff
document.getElementById("differenceDisplay").innerHTML=diff.toFixed(2);
frm.difference.value = diff.toFixed(2);
var ppCost = diff + fee;
frm.pptotal.value = ppCost.toFixed(2);
document.getElementById("ppDisplay").innerHTML=ppCost.toFixed(2);
var ttlCost = ppCost * gsts;
frm.totalcost.value = ttlCost.toFixed(2);
document.getElementById("grandTotalDisplay").innerHTML=ttlCost.toFixed(2);
// this is just for testing to show which method was actually used
if (orBase != "" && orTax != "" && nwBase != "" && nwTax != "" && fee != "" && gsts != "") {
// this is in its own if statement so it doesnt popuop while entering data
alert('if 1 was used');
}
}
else if (final_orTtl > final_nwTtl) {
if (selectVal == "residualX" || selectVal == "residualN") {
document.getElementById("MCOtable").style.display="none";
var diff = final_orTtl - final_nwTtl;
var displayDiff = diff* -1;
document.getElementById("differenceDisplay").innerHTML= displayDiff.toFixed(2);
frm.difference.value = displayDiff.toFixed(2);
document.getElementById("forfeitInfo").innerHTML = "Beyond the cost above";
frm.lost.value = diff.toFixed(2);
document.getElementById("ppForfeitedDisplay").innerHTML = diff.toFixed(2);
var ttlfForfeited = diff * gsts;
frm.lostTTL.value = ttlfForfeited.toFixed(2);
document.getElementById("totalForfeitedDisplay").innerHTML=ttlfForfeited.toFixed(2);
var ppCost = fee;
frm.pptotal.value = ppCost.toFixed(2);
document.getElementById("ppDisplay").innerHTML=ppCost;
var ttlCost = fee * gsts;
frm.totalcost.value = ttlCost.toFixed(2);
document.getElementById("grandTotalDisplay").innerHTML=ttlCost;
if (orBase != "" && orTax != "" && nwBase != "" && nwTax != "" && fee != "" && gsts != "") {
document.getElementById("forfeitTable").style.display="table";
}
// this is just for testing to show which method was actually used
if (orBase != "" && orTax != "" && nwBase != "" && nwTax != "" && fee != "" && gsts != "") {
// this is in its own if statement so it doesnt popuop while entering data
alert('if 2.1 was used');
}
}
// this is the method that should be used below
else if (selectVal == "residualA" ) {
document.getElementById("MCOtable").style.display="none";
var diff = final_orTtl - final_nwTtl;
var displayDiff = diff* -1;
document.getElementById("differenceDisplay").innerHTML= displayDiff.toFixed(2);
frm.difference.value = diff.toFixed(2);
if ( diff > fee) {
var residual = diff - fee ;
document.getElementById("forfeitInfo").innerHTML = "No additional cost. However,";
frm.lost.value = residual.toFixed(2);
document.getElementById("ppForfeitedDisplay").innerHTML = residual.toFixed(2);
var ttlfForfeited = residual * gsts;
frm.lostTTL.value = ttlfForfeited.toFixed(2);
document.getElementById("totalForfeitedDisplay").innerHTML=ttlfForfeited.toFixed(2);
//document.getElementById("differenceDisplay").innerHTML=0;
frm.difference.value = diff;
document.getElementById("ppDisplay").innerHTML=0;
document.getElementById("grandTotalDisplay").innerHTML=0;
if (orBase != "" && orTax != "" && nwBase != "" && nwTax != "" && fee != "" && gsts != "") {
document.getElementById("forfeitTable").style.display="table";
}
// this is just for testing to show which method was actually used
if (orBase != "" && orTax != "" && nwBase != "" && nwTax != "" && fee != "" && gsts != "") {
// this is in its own if statement so it doesnt popuop while entering data
alert('if 2.2 was used');
}
}
else {
var remBal = fee - diff ;
var ttlcost = remBal * gsts;
frm.totalcost.value = ttlcost.toFixed(2);
document.getElementById("ppDisplay").innerHTML=remBal.toFixed(2);
document.getElementById("grandTotalDisplay").innerHTML=ttlcost.toFixed(2);
document.getElementById("forfeitTable").style.display="none";
// this is just for testing to show which method was actually used
if (orBase != "" && orTax != "" && nwBase != "" && nwTax != "" && fee != "" && gsts != "") {
// this is in its own if statement so it doesnt popuop while entering data
alert('if 2.3 was used');
}
}
}
else if (selectVal == "residualM" ) {
var diff = final_orTtl - final_nwTtl;
var displayDiff = diff* -1;
document.getElementById("differenceDisplay").innerHTML= displayDiff.toFixed(2);
frm.difference.value = displayDiff.toFixed(2);
if (diff > fee) {
var mco = diff - fee ;
document.getElementById("MCOInfo").innerHTML=mco.toFixed(2);
frm.MCOamt.value = mco.toFixed(2);
//document.getElementById("differenceDisplay").innerHTML=diff;
//frm.difference.value = diff* -1;
frm.totalcost.value = 0;
document.getElementById("ppDisplay").innerHTML=0;
document.getElementById("grandTotalDisplay").innerHTML=0;
if (orBase != "" && orTax != "" && nwBase != "" && nwTax != "" && fee != "" && gsts != "") {
document.getElementById("forfeitTable").style.display="none";
document.getElementById("MCOtable").style.display="table";
}
// this is just for testing to show which method was actually used
if (orBase != "" && orTax != "" && nwBase != "" && nwTax != "" && fee != "" && gsts != "") {
// this is in its own if statement so it doesnt popuop while entering data
alert('if 2.4 was used');
}
}
else {
var remBal = fee - diff ;
var ttlcost = remBal * gsts;
frm.totalcost.value = ttlcost.toFixed(2);
document.getElementById("ppDisplay").innerHTML=remBal.toFixed(2);
document.getElementById("grandTotalDisplay").innerHTML=ttlcost.toFixed(2);
document.getElementById("forfeitTable").style.display="none";
document.getElementById("MCOtable").style.display="none";
// this is just for testing to show which method was actually used
if (orBase != "" && orTax != "" && nwBase != "" && nwTax != "" && fee != "" && gsts != "") {
// this is in its own if statement so it doesnt popuop while entering data
alert('if 2.5 was used');
}
}
}
}
var nwTtl = fltrd_nwTtl / 100;
var final_orTtl = orTtl.toFixed(2)
var orTtl = fltrd_orTtl / 100;
var final_orTtl = orTtl.toFixed(2)
if (final_orTtl > final_nwTtl ) {
}
This part seems to be my problem. the if comparison im doing here doesnt seem to like the '.toFixed(2)' that I did above it for some reason. I changed it to:
var nwTtl = fltrd_nwTtl / 100;
var orTtl = fltrd_orTtl / 100;
if (orTtl > nwTtl ) {
}
Im still testing all the other features but this seems to be working as expected so far. I would still love to know why my use of '.toFixed(2)' causes two numbers that are clearly higher vs lower to evaluate to the opposite. and will accept any answer to that part of this question