We Keep Coding

Adding conditions to filter() dynamically in Javascript

I want to add conditions in JavaScript filter() method dynamically.
I have the code below:
let condition = '';
let a = ['empEmail', 'employeeAction', 'transactionNo', 'deviceListName', 'projectName'];
if (this.selectedEmployeeAlias != undefined) {
condition += '&& a => a.empEmail === this.selectedEmployeeAlias';
}
if (this.employeeStatusList != undefined) {
condition += '&& a.employeeAction === this.employeeStatusList'
}
if (this.selectedTransactionNo != undefined) {
condition += '&& a.transactionNo === this.selectedTransactionNo';
}
if (this.selectedDeviceList != undefined) {
condition += ' && a.deviceListName == this.selectedDeviceList';
}
if (this.selectedProjectName != undefined) {
condition += '&& a.projectName == this.selectedProjectName';
}
var finalCondition = condition.substring(2, condition.length);
var fArray = arrayDetails.filter(finalCondition);
The code is returning an error as:
finalCondition is not a function.
Could you please let me know how can I add conditions to filter() dynamically.

You could take an array of functions with conditions. Then iterate with every.
var conditions = [];
if (this.selectedEmployeeAlias !== undefined) {
conditions.push(a => a.empEmail === this.selectedEmployeeAlias);
}
if (this.employeeStatusList !== undefined) {
conditions.push(a => a.employeeAction === this.employeeStatusList);
}
if (this.selectedTransactionNo !== undefined) {
conditions.push(a => a.transactionNo === this.selectedTransactionNo);
}
if (this.selectedDeviceList !== undefined) {
conditions.push(a => a.deviceListName == this.selectedDeviceList);
}
if (this.selectedProjectName !== undefined) {
conditions.push(a => a.projectName == this.selectedProjectName);
}
var fArray = arrayDetails.filter(o => conditions.every(c => c(o)));

As you got the nakes of the keys, just loop over them and check for undefineds:
const keys = ['empEmail', 'employeeAction', 'transactionNo', 'deviceListName', 'projectName'];
const result = arrayDetails.filter(el => {
for(const key of keys) {
if(this[key] === undefined) continue;
if(this[key] !== el[key]) return false;
}
return true;
});

eval to the Rescue!
While it's generally advised against, eval does exactly what you want here.
Just pass your condition variable to eval inside the .filter method and voila!
let condition='';
let a = ['empEmail', 'employeeAction', 'transactionNo', 'deviceListName', 'projectName'];
if (this.selectedEmployeeAlias != undefined) {
condition += '&& a => a.empEmail === this.selectedEmployeeAlias';
}
if (this.employeeStatusList != undefined) {
condition += '&& a.employeeAction === this.employeeStatusList'
}
if (this.selectedTransactionNo != undefined) {
condition += '&& a.transactionNo === this.selectedTransactionNo';
}
if (this.selectedDeviceList != undefined) {
condition += ' && a.deviceListName == this.selectedDeviceList';
}
if (this.selectedProjectName != undefined) {
condition += '&& a.projectName == this.selectedProjectName';
}
var finalCondition=condition.substring(2, condition.length);
var fArray=arrayDetails.filter(stuff => eval(finalCondition));

Rewrite script from js to jquery

I have a script that I want to make more bulletproof. At the moment the page breaks because class box-tip is not found. To make this bulletproof and not throw an error how can I rewrote the below code to jquery getting the same results as js
function applyRecommendedSleeveLength(selectedVal) {
if (selectedVal !== undefined) {
var recommendedVal = map[selectedVal.trim()];
var selected = $('.attribute__swatch--selected:first div').text().trim();
if (recommendedVal === null || recommendedVal === undefined) {
selectedVal = $('.attribute__swatch--selected:first div').text().trim();
recommendedVal = map[selectedVal.trim()];
}
if (selected === null || selected === '' || selected === undefined) return;
var recommendedLis = document.querySelectorAll('[class*="attribute__swatch--length-' + recommendedVal + '"] div');
recommendedLis.forEach(function(recommendedLi, i) {
if (recommendedLi !== null && recommendedLi !== undefined) {
recommendedLi.classList.add('showBorder');
$('.box-tip').show();
var currentPosition = $('.showBorder').parent().position().left;
var sleeveRecom = document.getElementsByClassName('box-tip');
var info = sleeveRecom.length ? sleeveRecom[0] : false;
info.style.paddingLeft = currentPosition + -75 + 'px';
}
});
}
}

If you want to check if the div exists, you can use this (using JQuery):
if ( $('.box-tip').length != 0 ){
//do something
}
OR- since you've edited your post- without JQuery:
if ( document.getElementsByClassName('box-tip').length != 0 ){
//do something
}

Just use jQuery for all of this. If the class doesn't exist the jQuery methods won't cause errors
function applyRecommendedSleeveLength() {
$('.box-tip').show().first().css('paddingLeft', (currentPosition - 75) + 'px');
}

Conversion tag written in javascript

I am researching the following conversion tag written in javascript.
<script type="text/javascript">
var tag_id = 123456789;
var adnetwork_domain = "https://s.adnetwork.net";
</script>
<script type="text/javascript" src="https://s2.adnetwork.net/js/adnetworkRt.js"></script>
https://s2.adnetwork.net/js/adnetworkRt.js
if ("undefined" == typeof adnetwork_domain) var adnetwork_domain = "https://s.adnetwork.net";
if ("undefined" == typeof adnetworkRt) var adnetworkRt = {
init: function() {
try {
if (-1 != document.cookie.indexOf("adnetworkoptout")) return 0;
"undefined" != typeof tag_id && document.createElement("img").setAttribute("src", adnetwork_domain + "/rt.php?tag_id=" + tag_id)
} catch (a) {
console.log(a)
}
}
};
var adnetwork_user_agent = navigator.userAgent;
!navigator.cookieEnabled || (-1 == adnetwork_user_agent.search(/AppleWebKit/) || -1 == adnetwork_user_agent.search(/Android/) && -1 == adnetwork_user_agent.search(/iPhone/) && -1 == adnetwork_user_agent.search(/iPod/) && -1 == adnetwork_user_agent.search(/iPad/)) || adnetworkRt.init();
In the following part, I cannot understand the reason of making img tag and where the img tag is set.
document.createElement("img").setAttribute("src", adnetwork_domain + "/rt.php?tag_id=" + tag_id)
Could you tell me the answer?

how to change the default working of SetFocusOnError property of required field validator

the default behavior of setFocusOnError= true set the focus on error field. But issue is that there is a banner on top of the window having fixed position. due to which banner hides the error field. How do I override the default working of setFocusOnError so that there is a margin between banner and the error field?

<script type="text/jscript">
$(function () {
// on first time page load
if (typeof (Page_ClientValidate) != "undefined") {
ValidatorSetFocus = CustomSetFocus;
}
});
function CustomSetFocus(val, event) {
var ctrl;
if (typeof (val.controlhookup) == "string") {
var eventCtrl;
if ((typeof (event) != "undefined") && (event != null)) {
if ((typeof (event.srcElement) != "undefined") && (event.srcElement != null)) {
eventCtrl = event.srcElement;
}
else {
eventCtrl = event.target;
}
}
if ((typeof (eventCtrl) != "undefined") && (eventCtrl != null) &&
(typeof (eventCtrl.id) == "string") &&
(eventCtrl.id == val.controlhookup)) {
ctrl = eventCtrl;
}
}
if ((typeof (ctrl) == "undefined") || (ctrl == null)) {
ctrl = document.getElementById(val.controltovalidate);
}
if ((typeof (ctrl) != "undefined") && (ctrl != null) &&
(ctrl.tagName.toLowerCase() != "table" || (typeof (event) == "undefined") || (event == null)) &&
((ctrl.tagName.toLowerCase() != "input") || (ctrl.type.toLowerCase() != "hidden")) &&
(typeof (ctrl.disabled) == "undefined" || ctrl.disabled == null || ctrl.disabled == false) &&
(typeof (ctrl.visible) == "undefined" || ctrl.visible == null || ctrl.visible != false) &&
(IsInVisibleContainer(ctrl))) {
if ((ctrl.tagName.toLowerCase() == "table" && (typeof (__nonMSDOMBrowser) == "undefined" || __nonMSDOMBrowser)) ||
(ctrl.tagName.toLowerCase() == "span")) {
var inputElements = ctrl.getElementsByTagName("input");
var lastInputElement = inputElements[inputElements.length - 1];
if (lastInputElement != null) {
ctrl = lastInputElement;
}
}
if (typeof (ctrl.focus) != "undefined" && ctrl.focus != null) {
ctrl.focus();
Page_InvalidControlToBeFocused = ctrl;
var temp1=$(window).scrollTop();
temp1 = temp1 - 150;
$(window).scrollTop(temp1);
}
}
}
</script>

check if object is a textbox - javascript

I understand that we can use (javascript)
if (typeof textbox === "object") { }
but are there methods which will allow me to ensure that the object is a textbox?

var isInputText = obj instanceof HTMLInputElement && obj.type == 'text';

As of 2016, use this:
function isTextBox(element) {
var tagName = element.tagName.toLowerCase();
if (tagName === 'textarea') return true;
if (tagName !== 'input') return false;
var type = element.getAttribute('type').toLowerCase(),
// if any of these input types is not supported by a browser, it will behave as input type text.
inputTypes = ['text', 'password', 'number', 'email', 'tel', 'url', 'search', 'date', 'datetime', 'datetime-local', 'time', 'month', 'week']
return inputTypes.indexOf(type) >= 0;
}

Are you looking for something like this?
if(textbox.tagName && textbox.tagName.toLowerCase() == "textarea") {
alert('this is a textarea');
}
If you need to know if it's a text input, you can do this:
if(textbox.tagName && textbox.tagName.toLowerCase() == "input" && textbox.type.toLowerCase() == "text") {
alert('this is a text input');
}

If it's a text input you're looking for:
if (textbox.tagName == "input" && textbox.getAttribute("type") == "text") {
// it's a text input
}
If you're looking for a textarea
if (textbox.tagName == "textarea") {
// it's a textarea
}

if(textbox instanceof HTMLInputElement && textbox.getAttribute("type") == "text") {
alert("I'm an input text element");
}

I think perhaps you would want to get a reference to an element, and then check for the return value of .type i.e.
var element = document.getElementById('element_in_question');
if(element.type == "textarea"){
console.log('I must be textarea');
}