After writing so many if else, I feel very tired. I'm using Vue. The following code are written in the script section of the vue file. I get a json from file, and then read the values in json, then set what button should be display based on employee level and on application status. Is there a better way to change the button display status in Vue?
if (
(this.GLOBAL2.jsonForGlobal.employeeLevel == "1" &&
(this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Checking" ||
this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending" ||
this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Approved")) ||
(this.GLOBAL2.jsonForGlobal.employeeLevel == "2" &&
(this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending" ||
this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Approved")) ||
(this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Approved")
) {
this.pullDisplay = true;
} else {
this.pullDisplay = false;
};
if (
this.GLOBAL2.jsonForGlobal.employeeLevel == "1" &&
this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Revising"
) {
this.cancelDisplay = true;
} else {
this.cancelDisplay = false;
};
if (
(this.GLOBAL2.jsonForGlobal.employeeLevel == "1" &&
this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Revising") ||
(this.GLOBAL2.jsonForGlobal.employeeLevel == "2" &&
this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Checking") ||
(this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending")
) {
this.saveDisplay = true;
} else {
this.saveDisplay = false;
};
if (
this.GLOBAL2.jsonForGlobal.employeeLevel == "1" &&
this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Revising"
) {
this.reviseDisplay = true;
} else {
this.reviseDisplay = false;
};
if (
(this.GLOBAL2.jsonForGlobal.employeeLevel == "2" &&
this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Checking") ||
(this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending")
) {
this.sendDisplay = true;
} else {
this.sendDisplay = false;
};
if (
(this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Pending") ||
(this.GLOBAL2.jsonForGlobal.employeeLevel == "2" &&
this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus == "Checking")
) {
this.approvalDisplay = true;
} else {
this.approvalDisplay = false;
};
And also there are a few ones need three conditions:
if (
this.GLOBAL2.jsonForGlobal.employeeLevel == "3" &&
this.GLOBAL2.jsonForGlobal.detail[this.detailId].requestCategory ==
"External Request" &&
this.GLOBAL2.jsonForGlobal.detail[this.detailId].currentStatus ==
"Pending"
) {
this.returnDisplay = true;
} else {
this.returnDisplay = false;
}
Going with a configuration based approach will make your code much more easy to edit and to read.
const levels = {
'1': {
pullDisplayStatus: ['Checking', 'Pending', 'Approved'],
cancelDisplayStatus: ['Revising'],
saveDisplayStatus: ['Revising'],
reviseDisplayStatus: ['Revising'],
sendDisplayStatus: [],
approvalDisplayStatus: [],
},
'2': {
pullDisplayStatus: ['Pending', 'Approved'],
cancelDisplayStatus: [],
saveDisplayStatus: ['Checking'],
reviseDisplayStatus: [],
sendDisplayStatus: ['Checking'],
approvalDisplayStatus: ['Checking'],
},
'3': {
pullDisplayStatus: ['Approved'],
cancelDisplayStatus: [],
saveDisplayStatus: ['Pending'],
reviseDisplayStatus: [],
sendDisplayStatus: ['Pending'],
approvalDisplayStatus: ['Pending'],
},
}
const jsonForGlobal = this.GLOBAL2.jsonForGlobal;
const currentStatus = jsonForGlobal.detail[this.detailId].currentStatus;
const level = levels[jsonForGlobal.employeeLevel];
this.pullDisplay = level.pullDisplayStatus.indexOf(currentStatus) > -1;
this.cancelDisplay = level.cancelDisplayStatus.indexOf(currentStatus) > -1;
this.saveDisplay = level.cancelDisplayStatus.indexOf(currentStatus) > -1;
this.reviseDisplay = level.reviseDisplayStatus.indexOf(currentStatus) > -1;
this.sendDisplay = level.reviseDisplayStatus.indexOf(currentStatus) > -1;
If you use a property often it makes sense to introduce a local variable for it to clean things up:
const { employeeLevel, detail: { [this.detailId]: { currentStatus }}} = his.GLOBAL2.jsonForGlobal;
Secondly you don't need the if / else, you can just assign the boolean:
this.pullDisplay = (
employeeLevel == "1" && ["Checking", "Pending", "Approved"].includes(currentStatus) ||
employeeLevel == "2" && ["Pending", "Approved"].includes(currentStatus) ||
employeeLevel == "3" && currentStatus == "Approved"
)
Related
I have a click button which is validating data from firebase firestore, but it is not giving the correct output as in the checks applied are getting failed.
createAptBtn.onclick = () => {
if (category.value === "" || email.value === "" || day.value === "" || time.value === "") {
promptContent.innerText = "All fields are required."
}
else if (category.value === "New") {
db.collection("recordsDb").onSnapshot((querySnapshot) => {
querySnapshot.forEach((doc) => {
//Condtion 1
if (email.value === doc.data().email && day.value === doc.data().day && time.value === doc.data().time) {
promptContent.innerText = "Email already exists."
}
//Condition 2
if (email.value !== doc.data().email && day.value === doc.data().day && time.value === doc.data().aptTimeSlot) {
promptContent.innerText = "Slot already filled."
}
//Condition 3
if (email.value === doc.data().email || mobile.value === doc.data().mobile) {
promptContent.innerText = "User already exits."
}
// Condition 4
if(email.value !== doc.data().email && day.value !== doc.data().day && time.value !== doc.data().time) {
promptContent.innerText = "Account created."
}
})
})
}
}
Also even when one of the condition is true it still outputs the else statement which should work when all ifs are getting failed.
However, condition 4 is an else statement but since its not working I'm using it as an if statement by adding some checks in it which though fails.
How do I fix this?
I need some help
I have two arrays:
First array have Boolean elements. (It's true when button is active , and false if not)
The second one strings where "0"(active) or "1" (inactive).
let arrayBotoesCategorias = [iconCategoriaIndividual, iconCategoriaGrupo, iconCategoriaIndoor, iconCategoriaOutdoor, iconCategoriaAquatico,iconCategoriaNatureza];
let arrayCategorias = [item.individual, item.grupo, item.indoor, item.outdoor, item.aquatico, item.natureza];
To understand better , PaintBall have grupo(group), indoor, outdoor and natureza(nature) activated. The rest are inactive. Like this
individual: "0",
grupo: "1",
indoor: "1",
outdoor: "1",
aquatico: "0",
natureza: "1",
What I need it's the following but of course with another solution:
if(arrayBotoesCategorias[1] == true && arrayBotoesCategorias[2] == true && arrayBotoesCategorias[3] == true && arrayBotoesCategorias[5] == true){
if(arrayCategorias[1] == "1" && arrayCategorias[2] == "1" && arrayCategorias[3] == "1" && arrayCategorias[5] == "1"){
return(itemSection)
}
}
When a element from the first array is true and the same position of the second is == "1" , return something.
Example
In this example image , I Want to show the images that have those 3 tables (outdoor, aquatico and natureza with value "1");
Maybe u need to organize your array like an array of object so that u have options when it comes to validating and the value that changing.
let arrayBotoesCategorias = [
{
label: "iconCategoriaIndividual",
name: "individual",
value: false
},
{
label: "iconCategoriaGrupo",
name: "grupo",
value: false
},
{
label: "iconCategoriaIndoor",
name: "indoor",
value: false
}
];
let arrayCategorias = [
{
label: "individual",
name: "individual",
value: false
},
{
label: "groupo",
name: "groupo",
value: false
},
{
label: "indoor",
name: "indoor",
value: false
}
];
let selectedInput = "individual";
arrayBotoesCategorias.filter((item) => {
item.value = selectedInput === item.name;
return item;
});
arrayCategorias.filter((item) => {
item.value = selectedInput === item.name;
return item;
});
document.body.innerHTML = `
arrayBotoesCategorias ${JSON.stringify(arrayBotoesCategorias)}
<br>
<br>
arrayCategorias ${JSON.stringify(arrayCategorias)}`;
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="src/index.js">
</script>
</body>
</html>
Already solved Thanks for the help!
var controlCategorias = 0;
var errorControlCategorias = 0;
for(var i = 0; i<arrayBotoesCategorias.length; i++){
switch (i){
case 0:
if((arrayBotoesCategorias[0] && item.individual == "1") || (!arrayBotoesCategorias[0] && item.individual == "0") || (!arrayBotoesCategorias[0] && item.individual == "1")) {
controlCategorias++;
}else{
errorControlCategorias++;
}
break;
case 1:
if((arrayBotoesCategorias[1] && item.grupo == "1") || (!arrayBotoesCategorias[1] && item.grupo == "0") || (!arrayBotoesCategorias[1] && item.grupo == "1")) {
controlCategorias++;
}else{
errorControlCategorias++;
}
break;
case 2:
if((arrayBotoesCategorias[2] && item.indoor == "1") || (!arrayBotoesCategorias[2] && item.indoor == "0") || (!arrayBotoesCategorias[2] && item.indoor == "1")) {
controlCategorias++;
}else{
errorControlCategorias++;
}
break;
case 3:
if((arrayBotoesCategorias[3] && item.outdoor == "1") || (!arrayBotoesCategorias[3] && item.outdoor == "0") || (!arrayBotoesCategorias[3] && item.outdoor == "1")) {
controlCategorias++;
}else{
errorControlCategorias++;
}
break;
case 4:
if((arrayBotoesCategorias[4] && item.aquatico == "1") || (!arrayBotoesCategorias[4] && item.aquatico == "0") || (!arrayBotoesCategorias[4] && item.aquatico == "1")) {
controlCategorias++;
}else{
errorControlCategorias++;
}
break;
case 5:
if((arrayBotoesCategorias[5] && item.natureza == "1") || (!arrayBotoesCategorias[5] && item.natureza == "0") || (!arrayBotoesCategorias[5] && item.natureza == "1")) {
controlCategorias++;
}else{
errorControlCategorias++;
}
break;
}
}
if(controlCategorias > 0 && errorControlCategorias == 0){
return itemSection;
}
I have the following code that I would like to reduce. This question might be very lame, so sorry about it.
I wanted to replace the meal1..10 with a variable in a for loop, but I'm not sure if that can be done in node js.
function hasPortion(meals) {
const portions = ["4", "3", "2", "1", "1/8", "1/4", "1/2"];
if (meals.meal1 != undefined && meals.meal1.activado == "on" && portions.indexOf(meals.meal1.porcion) < 0) { return false; }
if (meals.meal2 != undefined && meals.meal2.activado == "on" && portions.indexOf(meals.meal2.porcion) < 0) { return false; }
if (meals.meal3 != undefined && meals.meal3.activado == "on" && portions.indexOf(meals.meal3.porcion) < 0) { return false; }
if (meals.meal4 != undefined && meals.meal4.activado == "on" && portions.indexOf(meals.meal4.porcion) < 0) { return false; }
if (meals.meal5 != undefined && meals.meal5.activado == "on" && portions.indexOf(meals.meal5.porcion) < 0) { return false; }
if (meals.meal6 != undefined && meals.meal6.activado == "on" && portions.indexOf(meals.meal6.porcion) < 0) { return false; }
if (meals.meal7 != undefined && meals.meal7.activado == "on" && portions.indexOf(meals.meal7.porcion) < 0) { return false; }
if (meals.meal8 != undefined && meals.meal8.activado == "on" && portions.indexOf(meals.meal8.porcion) < 0) { return false; }
if (meals.meal9 != undefined && meals.meal9.activado == "on" && portions.indexOf(meals.meal9.porcion) < 0) { return false; }
if (meals.meal10 != undefined && meals.meal10.activado == "on" && portions.indexOf(meals.meal10.porcion) < 0) { return false; }
return true;
}
If meals only have these 10 properties, you may like this,
function hasPortion(meals) {
const portions = ["4", "3", "2", "1", "1/8", "1/4", "1/2"];
for (const prop in meals) {
const meal = meals[prop];
if (meal != undefined && meal.activado == "on" && portions.indexOf(meal.porcion) < 0) {
return false;
}
}
return true;
}
If you have more properties, but only want to check these 10 properties, you may like this,
function hasPortion(meals) {
const portions = ["4", "3", "2", "1", "1/8", "1/4", "1/2"];
for (let i = 1; i <= 10; i++) {
const prop = `meal${i}`;
const meal = meals[prop];
if (meal != undefined && meal.activado == "on" && portions.indexOf(meal.porcion) < 0) {
return false;
}
}
return true;
}
Append: new solution
As we mentioned, you should use an Array to store all meal items, also you may use a Set to store portions because searching in Set is faster than Array.
const meals = [
{ activado: "on", porcion: "4" },
{ activado: "on", porcion: "1/8" },
{ activado: "on", porcion: "3" },
{ activado: "on", porcion: "1/2" },
];
function hasPortion(meals) {
const portions = new Set(["4", "3", "2", "1", "1/8", "1/4", "1/2"]);
return !meals.some((meal) => meal.activado === "on" && !portions.has(meal.porcion));
}
// Good case
console.log(hasPortion(meals)); // Output: true
// Add bad item
meals.push({ activado: "on", porcion: "1/3" })
console.log(hasPortion(meals)); // Output: false
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 6 years ago.
Improve this question
In a project I am working on I have 21 buttons that all have active and inactive states. The state of certain buttons is affected by other buttons being pressed as well as that button being pressed. In my html I use ng-click to call a function updateActiveButtons(num) to activate or deactivate certain buttons.
The best way I could think of was to use an array of 21 elements, all of which were set to false by default and then changed when they were pressed.
The problem is that my code is UGLY and I know that there has to be a much better way to logic it out.
Here is my updateActiveButtons function:
/* Array for active buttons
0: Company Name 1: Country 2: Industry 3: Search 4: Company Name - Seller Name 5: Company Name - Buyer Name 6: Country - USA 7: Country - China 8: Country - Israel
9: Country - Russia 10: Country - India 11: Country - Japan 12: Industry - Tech 13: Industry - Consumer 14: Industry - Pharma 15: Industry - Financial 16: Industry - Biotech 17: Industry - Industrial
18: Date 19: Valuation 20: Industry - Business
*/
$scope.activeButtonArray = new Array(21);
for (var i = 0; i < $scope.activeButtonArray.length; i++) { $scope.activeButtonArray[i] = false; }
//pos = position in array
$scope.updateActiveButtons = function(pos) {
console.log($scope.activeButtonArray[20]);
if(pos != 0 || pos != 1 || pos != 2 || pos != 3 || pos != 4 || pos != 5) {
$scope.activeButtonArray[pos] = !$scope.activeButtonArray[pos];
} else if(pos == 3 && !$scope.activeButtonArray[pos]) {
$scope.activeButtonArray[pos] = true;
} else if(pos == 3 && $scope.activeButtonArray[pos]) {
$scope.activeButtonArray[pos] = false;
}
if(pos == 18 || pos == 19) {
$scope.activeButtonArray[0] = false;
if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) {
$scope.activeButtonArray[1] = false;
}
if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) {
$scope.activeButtonArray[2] = false;
}
}
if(pos == 0) {
$scope.activeButtonArray[0] = true;
if($scope.activeButtonArray[4] || $scope.activeButtonArray[5]) {
$scope.activeButtonArray[0] = true;
}
if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) {
$scope.activeButtonArray[1] = false;
}
if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) {
$scope.activeButtonArray[2] = false;
}
if($scope.search.text == undefined || $scope.search.text == '') {
$scope.activeButtonArray[3] = false;
}
}
if(pos == 1) {
if($scope.activeButtonArray[4] == false && $scope.activeButtonArray[5] == false) {
$scope.activeButtonArray[0] = false;
}
if($scope.activeButtonArray[6] == true || $scope.activeButtonArray[7] == true || $scope.activeButtonArray[8] == true || $scope.activeButtonArray[9] == true || $scope.activeButtonArray[10] == true || $scope.activeButtonArray[11] == true) {
$scope.activeButtonArray[1] = true;
}
if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) {
$scope.activeButtonArray[2] = false;
}
if($scope.search.text == undefined || $scope.search.text == '') {
$scope.activeButtonArray[3] = false;
}
}
if(pos == 2) {
if($scope.activeButtonArray[4] == false && $scope.activeButtonArray[5] == false) {
$scope.activeButtonArray[0] = false;
}
if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) {
$scope.activeButtonArray[1] = false;
}
if($scope.activeButtonArray[12] == true || $scope.activeButtonArray[13] == true || $scope.activeButtonArray[14] == true || $scope.activeButtonArray[15] == true || $scope.activeButtonArray[16] == true || $scope.activeButtonArray[17] == true || $scope.activeButtonArray[20] == true) {
$scope.activeButtonArray[2] = true;
}
if($scope.search.text == undefined || $scope.search.text == '') {
$scope.activeButtonArray[3] = false;
}
}
if(pos == 3) {
if($scope.activeButtonArray[4] == false && $scope.activeButtonArray[5] == false) {
$scope.activeButtonArray[0] = false;
}
if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) {
$scope.activeButtonArray[1] = false;
}
if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) {
$scope.activeButtonArray[2] = false;
}
}
if(pos == 4) {
$scope.activeButtonArray[4] = true;
$scope.activeButtonArray[5] = false;
}
if(pos == 5) {
$scope.activeButtonArray[4] = false;
$scope.activeButtonArray[5] = true;
}
}
I have a lot of repeated code that comes out in a way that just doesn't feel very well done or professional. I wouldn't be proud to send this to a client. Does anyone have any suggestions as to how I could make this better?
On way would be to replace entire conditions (or blocks) by methods/functions
so
if($scope.activeButtonArray[4] || $scope.activeButtonArray[5]) {
$scope.activeButtonArray[0] = true;
}
becomes
if (somethingIsSomething($scope))
This has the added benefit of be much more self-documenting so you can "read" what you're doing.
I liked pixelearth's recommendation to just create another function so I did.
I decided to make a function that took an array, a start, and a end point as parameters and return true if any of the array values in that range are true.
Here is the function:
var arrayContainsTrue = function(arr, start, end) {
for(var i = start; i <= end; i++) {
if(arr[i] == true) {
return true;
}
}
return false;
}
and then to shorten my code I just did this (with different start and end points based on what was needed):
if(!arrayContainsTrue($scope.activeButtonArray, 6, 11))
I have multiple select menus which are used to filter a table using jquery datatables.
The following code i use works brilliant, but for this example I am only using 3 select menus.
I now have a table which will be using upwards of 10.
Is there a better way of writing this so I don't have to write every variation of matches.
//UPDATE
If I put the select vars and the tabledata column vars in array can I iterate through them.
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
if ( oSettings.nTable == document.getElementById( 'logtable' ))
{
var nature_of_complaint = document.getElementById('nature_of_complaint_select').value;
var division = document.getElementById('division_select').value;
var resolved = document.getElementById('resolved_select').value;
var tabledata_nature_of_complaint = aData[22];
var tabledata_division = aData[12];
var tabledata_resolved = aData[26];
if (nature_of_complaint == "" && division == "" && resolved == "")
{ return true; }
else if (tabledata_division == division && nature_of_complaint == "" && resolved == "")
{ return true; }
else if (tabledata_nature_of_complaint == nature_of_complaint && division == "" && resolved == "")
{ return true; }
else if (tabledata_resolved == resolved && division == "" && nature_of_complaint == "")
{ return true; }
else if (tabledata_nature_of_complaint == nature_of_complaint && tabledata_division == division && resolved == "")
{ return true; }
else if (tabledata_division == division && tabledata_resolved == resolved && nature_of_complaint == "")
{ return true; }
else if (tabledata_resolved == resolved && tabledata_nature_of_complaint == nature_of_complaint && division == "")
{ return true; }
else if (tabledata_nature_of_complaint == nature_of_complaint && tabledata_division == division && tabledata_resolved == resolved)
{ return true; }
return false;
} else
return true;
}
);
Figured it out using this tutorial.
http://www.flynsarmy.com/2011/12/save-custom-filter-state-jquery-data-tables/
Just add class of 'dtable_filter' to each select.
Here is the reduced code:
$.fn.dataTableExt.afnFiltering = new Array();
var oControls = $('#adv_search_filters').find(':input[name]');
oControls.each(function() {
var oControl = $(this);
//Add custom filters
$.fn.dataTableExt.afnFiltering.push(function( oSettings, aData, iDataIndex ) {
if ( !oControl.val() || !oControl.hasClass('dtable_filter') ) return true;
for ( i=0; i<aData.length; i++ )
if ( aData[i].indexOf(oControl.val()) != -1 )
return true;
return false;
});
});