Table filters in Vuejs - javascript

I'm building a small application in vuejs where I'm having a filter something like this:
tableFilter: function () {
const searchTerm = this.search.toLowerCase();
const searchByType = this.search_by_tag.toLowerCase();
if(this.contactStore.contactList)
{
return this.contactStore.contactList.data.filter((item) =>
(item.first_name.toLowerCase().includes(searchTerm)
|| (item.last_name !==null && item.last_name.toLowerCase().includes(searchTerm))
|| (item.company.name !==null && item.company.name.toLowerCase().includes(searchTerm))
|| item.email.toLowerCase().includes(searchTerm)
|| (item.address !== null && item.address.toLowerCase().includes(searchTerm))
|| (item.city !== null && item.city.toLowerCase().includes(searchTerm))
|| (item.mobile !==null && item.mobile.toLowerCase().includes(searchTerm)))
&& ((item.profile !==null && item.profile.toLowerCase().includes(searchByType))
|| (item.company.type !== null && item.company.type.toLowerCase().includes(searchByType))
|| (item.company.sub_type !== null && item.company.sub_type.toLowerCase().includes(searchByType))));
}
},
In this I've a property called item.company which can be null, so while implementing
(item.company.type !== null && item.company.type.toLowerCase().includes(searchByType))
it is throwing error:
Error in render function: "TypeError: Cannot read property 'type' of null"
I'm looking for a solution where I can have if-else to find out whether the item is having company or not, if property is available then it can do the filters respectively.
Thanks

If you just want to fix the error:
|| (item.company && item.company.type !== null && item.company.type.toLowerCase().includes(searchByType))
But if you want to not filter by company if it is null:
|| (item.company ? && item.company.type !== null && item.company.type.toLowerCase().includes(searchByType) : true)

Related

Validating strings with Java and NodeJS

vo.getResultFun() and cod returns 'G'
Java validation
if ( genericValidator.isBlankOrNull(vo.getResultFun()) ||
!("G".equalsIgnoreCase(vo.getResultFun()) || "B".equalsIgnoreCase(vo.getResultFun()))) {
throw new UCNaoCadastradaGerBenException();
}
NodeJS
if (Validator.isNullUndefinedEmpty(cod) ||
!(Validator.isEqual(cod, 'B', true) || Validator.isEqual(cod, 'G', true))) {
callback(Translate.__('K1.CH1', lang), null);
isEqual
static isEqual(str1: string, str2: string, ignoreCase: boolean = false): boolean {
let ret = false;
if (ignoreCase) {
ret =
(str1 === undefined && str2 === undefined) ||
(str1 === null && str2 === null) ||
(str1 != null && str2 != null && typeof str1 === 'string' && typeof str2 === 'string' && str1.toUpperCase() === str2.toUpperCase());
} else {
ret =
(str1 === undefined && str2 === undefined) ||
(str1 === null && str2 === null) ||
(str1 != null && str2 != null && typeof str1 === 'string' && typeof str2 === 'string' && str1 === str2);
}
return ret;
}
Why NodeJS return the callback and Java don't throws the exception?
The result of this js part :
!(Validator.isEqual(cod, 'B', true) || Validator.isEqual(cod, 'G', true))
is false as the result of this java part:
!("G".equalsIgnoreCase(vo.getResultFun()) || "B".equalsIgnoreCase(vo.getResultFun()))
So there are several options :
Validator.isNullUndefinedEmpty doesn't works
cod is not strictly equals to 'G'
The callback function is not called

How can I push data into an array?

I have pushed some data into an array:
if(target === 'create'){
if(name === 'form[username]' || name === 'form[name]' || name === 'form[slug]' || name === 'form[plainPassword]'){
errors.push(name);
}
} else {
if(name === 'form[username]' || name === 'form[name]' || name === 'form[slug]' ){
errors.push(name);
}
}
It actually works fine. But it seems to me that it is really too much repeating code, but I still cannot find a way to reduce the code, or make a simpler better solution.
I would do it in two methods
function CheckErrors(target,name){
switch(target){
case 'create':
SaveError(name,true);
break;
default:
SaveError(name);
break;
}
}
function SaveError(name,checkPassword){
if(name === 'form[username]' || name === 'form[name]' || name === 'form[slug]' ||(checkPassword && name === 'form[plainPassword]')){
errors.push(name);
}
}
You could use arrays to simplify your if statement:
if((target === 'create' && name === 'form[plainPassword]') || ['form[username]', 'form[name]', 'form[slug]'].includes(name)){
errors.push(name);
}
If I rigth understand you, you want to simplify your statements. From my perspective it could be like this:
if(name === 'form[username]' || name === 'form[name]' || name === 'form[slug]'
|| (name === 'form[plainPassword]' && target === 'create')){
errors.push(name);
}
Since:
name === 'form[username]' || name === 'form[name]' || name === 'form[slug]'
is repeated two times, it doesn't matter if target === 'create' is true or false for this statements.
In fact just add (name === 'form[plainPassword]' && target === 'create') to if statement and that's all

Why use (!fn || zid(handler.fn) === zid(fn)) to (!fn || handler.fn === fn) in zepto.js - event.js?

In event.js, to judge the same handler, here is code:
return handler
&& (!event.e || handler.e == event.e)
&& (!event.ns || matcher.test(handler.ns))
&& (!fn || zid(handler.fn) === zid(fn))
&& (!selector || handler.sel == selector)
Why use (!fn || zid(handler.fn) === zid(fn)) to (!fn || handler.fn === fn)
Here is the source code of zid
var _zid = 1
function zid(element) {
return element._zid || (element._zid = _zid++)
}
if I have to judge two functions, a === b is enough
why to use zid(a) === zid(b)? Maybe some trap?
I don't know why?
Here is the source code of zepto.js event.js: https://github.com/madrobby/zepto/blob/master/src/event.js

JS | Why is the property of the Object truthy although it's empty?

So the value of the first object with the property "single" is empty, but still truthy, what did I wrong?
function every(collection, pre) {
var rtr = null;
for(var e in collection){
if(collection[e][pre] !== null &&
collection[e][pre] !== undefined &&
collection[e][pre] !== 0 &&
collection[e][pre] !== "" &&
collection[e][pre] !== false &&
collection[e][pre] !== NaN){
rtr = true;
}
else
rtr = false;
}
console.log(rtr);
}
every([{"single": ""}, {"single": "double"}], "single");
You console.log outside the loop. Try this (I also removed the stray `):
function every(collection, pre) {
var rtr = null;
for(var e in collection){
if(collection[e][pre] !== null &&
collection[e][pre] !== undefined &&
collection[e][pre] !== 0 &&
collection[e][pre] !== "" &&
collection[e][pre] !== false &&
collection[e][pre] !== NaN){
rtr = true;
}
else
rtr = false;
console.log(rtr);
}
}
every([{"single": ""}, {"single": "double"}], "single");
It logs
false
true

Javascript ||, how to compare multiple variables value?

How to right this syntax correctly:
if (tipoTropaPrioritaria[m] || troopsCount[m] || availableTroops[m]) == ("null" || "undefined") {
...
}
(to check if any of the first 3 variables is null or undefined)
You could define a small helper function that does the check and then use it on all the values:
function notset(v) {
return (v === undefined) || (v === null);
}
if (notset(tipoTropaPrioritaria[m]) || notset(troopsCount[m]) ||
notset(availableTroops[m])) {
...
}
Use:
if (tipoTropaPrioritaria[m] == null || troopsCount[m] == null || availableTroops[m] == null ||
tipoTropaPrioritaria[m] == undefined || troopsCount[m] == undefined || availableTroops[m] == undefined) {
// ...
}
EDIT: It's probably better to use the === (threequals) operator in this case.
if (tipoTropaPrioritaria[m] === null || troopsCount[m] === null || availableTroops[m] === null ||
tipoTropaPrioritaria[m] === undefined || troopsCount[m] === undefined || availableTroops[m] === undefined) {
// ...
}
or:
if (null in {tipoTropaPrioritaria[m]:0, troopsCount[m]:0, availableTroops[m]:0} || undefined in {tipoTropaPrioritaria[m]:0, troopsCount[m]:0, availableTroops[m]:0}) {
The way to do is:
if ((tipoTropaPrioritaria[m] == null || tipoTropaPrioritaria[m] == undefined)
|| (troopsCount[m] == null || troopsCount[m] == undefined) ||
(availableTroops[m] == null || availableTroops[m] == undefined)) {
...
}
If you do this a lot you can create a helper function
function isNullOrUndef(args) {
for (var i =0; i < arguments.length; i++) {
if (arguments[i] == null || typeof arguments[i] === "undefined") {
return true
}
}
return false
}
if (isNullOrUndef(tipoTropaPrioritaria[m], troopsCount[m], availableTroops[m]))
...
This is the best way to do what you want
if (!tipoTropaPrioritaria[m] || !troopsCount[m] || !availableTroops[m]) {
...
}
The ! operator coerces the result into a boolean that can be tested for (null and undefined becomes false), and with the ! in front false is negated into true.
The other way to do it is to test each expression against null and undefined.
function isNullOrUndefined(val) {
return (val === null || typeof val == "undefined");
}
if (isNullOrUndefined(a) || isNullOrUndefined(b) ... ) {
And so you know it, the correct way to test for undefined is
if (typeof foo === "undefined") {...
if (tipoTropaPrioritaria[m] && troopsCount[m] && availableTroops[m]) { }
else { /* At least ones is undefined/null OR FALSE */ }
if (tipoTropaPrioritaria[m] == null || troopsCount[m] == null || availableTroops[m] == null)
{ /* One is null. */ }
if you want to check if they are null or undefined you can write
if (!tipoTropaPrioritaria[m] || !troopsCount[m] || !availableTroops[m])
both null and undefined are falsely values. Then this will only be true if none of this are null or undefined.
Please consider that there are other falsely values as well:
0
empty string
NaN

Categories