Creating custom angular filters - javascript

i have a json of items and a barcode scanner, the barcode scanner inputs directly into my app.
Now the items have a primary part number and a secondary part number, more often than not the result from the barcode scanner will be the primary part number, but i have to check with both to be sure.
I'm trying to implement a custom filter to do this, but it doesn't seem to be working, can anyone maybe let me know what i'm doing wrong ?
storeApp.filter('barcodeScanner', function() {
return function(parts, barcode) {
angular.forEach(parts, function (vals, key) {
if( !angular.isUndefined(vals.Part_Number) && vals.Part_Number !== null )
if (angular.equals(vals.Part_Number,barcode))
return parts[key];
});
angular.forEach(parts, function(vals, key) {
if ( !angular.isUndefined(vals.Other_Part_Number) && vals.Other_Part_Number !== null )
if (angular.equals(vals.Other_Part_Number,barcode))
return parts[key];
});
};
});
i then call the filter later in the controller,
$scope.addItemToCart = function() {
$scope.shoppingCart.push($filter('barcodeScanner')($scope.parts, $scope.ItemToAdd));
console.log($scope.Cart.itemToAdd);
console.log($filter('barcodeScanner')($scope.parts, $scope.Cart.itemToAdd));
$scope.Cart.itemToAdd = "";
console.log($scope.shoppingCart);
};
however the result from the filter keeps returning undefined. i know for a fact that the entry i want does exist, because when i use a normal $filter('filter') it works fine, but i cannot risk such a widespread filter for my app.
thanks for any help :)

I believe the problem lies in the forEach part of your function. A forEach function does not return a value. You are returning a value to your iterator function and since the forEach is not returning that returned value from the iterator then you will have nothing to push in your $scope.shoppingCart.push($filter('barcodeScanner')($scope.parts, $scope.ItemToAdd));
Saving to a variable ie. matchedPart declared inside the anonymous factory(wrapper) function and returning it outside of the forEach function should solve the undefined:
storeApp.filter('barcodeScanner', function() {
return function(parts, barcode) {
// declare a variable here
var matchedPart;
angular.forEach(parts, function (vals, key) {
if( !angular.isUndefined(vals.Part_Number) && vals.Part_Number !== null )
if (angular.equals(vals.Part_Number,barcode))
// save it to new variable
matchedPart = parts[key];
});
angular.forEach(parts, function(vals, key) {
if ( !angular.isUndefined(vals.Other_Part_Number) && vals.Other_Part_Number !== null )
if (angular.equals(vals.Other_Part_Number,barcode))
// save it to new variable
matchedPart = parts[key];
});
// return it outside the forEach function
return matchedPart;
};
});
last note:
I would also think you should refactor by combining your forEach functions. Not have 2 separate ones. Combining your isUndefined check with !angular.isUndefined(vals.Part_Number) && !angular.isUndefined(vals.Other_Part_Number) && vals.Part_Number...

Instead of .equals you need to check == because string will not exactly equal to number
angular.equals is nothing but strongly check in javascript === which check both values are equal with their type or not.
if(angular.equals(vals.Other_Part_Number,barcode))
Changed to
if(vals.Other_Part_Number == barcode)
If you want to strictly check then you need to convert both the value to number using parseInt and then check
if(angular.equals(parseInt(vals.Other_Part_Number),parseInt(barcode)))
Hope this could help you. Thanks.

Related

OOP Question About Vanilla JS: The class's constructor won't accept the variable I'm feeding it as a parameter

I'm trying to learn OOP through practice, but I'm pretty stuck at this point.
This is the code:
const itemEdit = () => {
let editIndex = buttonObj.editArr.indexOf(editID);
console.log(`the editIndex outside of the class is ${editIndex}`);
if (typeof editIndex != "undefined") {
editText = new htmlTextualizer(editIndex);
console.log(
"new class successfully created as variable is not 'undefined' type"
);
}
editText.printOut();
This is the class/constructor:
class htmlTextualizer {
constructor(curr) {
this.curr = curr;
}
printOut() {
console.log(this.curr);
}
}
The output is either 'undefined' or nothing at all. The logic generally works outside of the function, so I suspect it's something to do with the scope of initiation, but I simply fail to work my way around it. Assistance would be much appreciated. Thanks.
JavaScript's indexOf() returns -1 if no match is found. That check should look something like this:
if (editIndex > -1) {…}
I'm not sure if that will resolve your problem or not, but it's a problem in general.
Also, if that if statement is not true, and if editText is not defined somewhere outside what you've pasted here, there will be an error because editText is undefined (and doesn't have methods available).
There are several things that are unclear about your example, since you reference several undefined objects: buttonObj.editArr, editID, editText.
In general, I would approach testing for existence more carefully. You don't want to attempt to access the indexOf method on something undefined.
I'm not sure what your business logic is exactly, but here is how to do what I think it is: always create the new object, unless buttonObj.editArr contains editID.
Here is how to do that:
const itemEdit = () => {
if ( !buttonObj ||
!buttonObj.editArr ||
(typeof buttonObj.editArr !== "object") ||
!editID ||
(buttonObj.editArr.indexOf(editID) < 0) ) {
editText = new htmlTextualizer(buttonObj.editArr.indexOf(editID));
console.log("creating instance of class htmlTextualizer");
}
}

How to use a constant in map return function ReactJS

I am wondering how can I use a constant in the map function, basically meaning: I have saved correctly the option I want from my falling menu regarding the constant (I checked it with console.log), for instance I have a name chosen and then I want to use it in the map function but unfortunately I get all the elements undefined when I use the constant; when I replace the constant with a directly written "name", I get all the elements correctly with their names.
Filterhosts=() =>{
var newState = this.state.array.slice(); // in the state array is empty
const selectedOption = this.state.selectedOption;
const writtenOption = this.state.writtenOption;
console.log(selectedOption) //ok
const namearray= this.state.filteredhosts.map(host=> {
return (
host.software.map((sub, subindex) => {
if(selectedOption=="name" || selectedOption=="vendor") {
newState.push(sub.selectedOption) //when I write sub.selectedOption , I receive empty array with all elements as undefined otherwise I become the names of all elements
}
else {
if(sub.vulnerable==true){
newState.push(sub.vulnerability.cve)}
}
})
)
})
const filteredarray = newState.filter( function(item){
return item === writtenOption // here I become properly the searched name//vendor
}
// how to show the whole info for the searched name/vendor(cpe, cve, cvss etc.)
)
console.log(newState); //ok
console.log(filteredarray); //ok
}
Oh I see.
sub.name
is the same as
sub["name"]
which is also the same as
sub[selectedOption]
IF selectedOption is "name". So just use newState.push(sub[selectedOption]) and I think that should work for you.

Wierd AngularJS error

I am rather new to AngularJS programming and was working on a sample application. I came across a problem while returning an object from a service. Consider following code in my custom service:
this.getCompanyInfo = function(companyID)
{
console.log( companyID );
angular.forEach( companyInfo, function( coInf ) {
if( coInf.companyID == companyID )
{
console.log(coInf);
return coInf;
}
})
}
in this code, companyInfo is an array containing information about companies, each company is represented by an object. the second console.log is showing this:
Object {companyID: "CHCL", companyName: "Chilime Hydropower", stockPriceTrend: Array[4]}
in my controller, I have this:
$scope.companyInfo = dataServices.getCompanyInfo( $routeParams.companyID);
console.log($scope.companyInfo);
but here, console.log says 'undefined'.
I don't know what wrong I have been doing, any help will be highly appreciated!
Regards.
You are just returning from the iterator function argument of the forEach (not from getCompanyInfo) which will still go on. But you need to return the actual value from your getCompanyInfo function. You can just use a simple for loop and return the value once you find a match.
this.getCompanyInfo = function(companyID)
{
var cInfo, i, l;
for(i=0,l=companyInfo.length; i<l;i++){
if((cInfo = companyInfo[i]).companyID === companyID ){
return cInfo ;
}
}
}
Returning from the iterator function does not break the looping using angular.forEach. Loop will still go on.
change function to
this.getCompanyInfo = function(companyID)
{
var coInfo;
console.log( companyID );
angular.forEach( companyInfo, function( coInf ) {
if( coInf.companyID == companyID )
{
console.log(coInf);
coInfo = coInf;
}
})
return coInfo;
}
you are not returning value from function but from forEach and that will not return the value from the function.
it has nothing to do with angular, btw.
EDIT
also you can use libraries like lodash/underscore for search/filter functionalities

KnockoutJS - computed abservable and js object

I am trying to return a property of an observable but seem to be missing something.
self.SelectedAccountTypeID = ko.computed(function () {
return self.selectedAccountType.AccountTypeID();
});
I am trying to return the AccountTypeID property of selectedAccountType but this is not working
when I try
self.SelectedAccountTypeID = ko.computed(function () {
return self.selectedAccountType();
});
it works but returns a javascript object
Here is a fiddle with the code
http://jsfiddle.net/qafrD/
You are on the right track, because your selectedAccountType is an observable you need to access its value with selectedAccountType()
So the correct syntax: self.selectedAccountType().AccountTypeID;
However because the self.selectedAccountType() can be null you need to check that first before accessing the AccountTypeID on it:
self.SelectedAccountTypeID = ko.computed(function () {
if (self.selectedAccountType())
return self.selectedAccountType().AccountTypeID;
});
Demo Fiddle
This is because self.selectedAccountType is an observable meaning that you need to invoke it like a function to retrieve its current value. The property "AccountTypeID" however is not an observable therefore you do not need parenthesis here.
self.SelectedAccountTypeID = ko.computed(function () {
// Retrieve the value of the observable
var selectedAccountType = self.selectedAccountType();
// The value may be "undefined" or "null" if there has not yet been
// anything stored in the observable
if (selectedAccountType && typeof selectedAccountType.AccountTypeID != "undefined") {
return selectedAccountType.AccountTypeID;
}
// Return a default value otherwise
return null;
});
Demo: http://jsfiddle.net/qafrD/1/

How to correctly determine if key exists in multidimensional javascript object using a recursive function

I am trying to create a recursive function that will loop through a multidimensional object and test whether the key exists in a separate object. If the key does not exist I want to break the loop and return false, if all the keys exist I want to return true.
The problem I am having is that the function always seems to be returning true. Here is the code I am using:
var properties = {'global': {'structure' : {'body': {}}}};
var testExists = {'global': {'structure': {'test': 'value'}}};
if( ! this.exists(properties, testExists)) {
console.log("DOESNT EXIST");
}
exists: function(destination, source) {
var exists = true;
check:
for (var property in source) {
if(destination[property]) {
arguments.callee(destination[property], source[property]);
}
else
{
exists = false;
break check;
}
}
console.log(exists);
return exists;
},
When I view the console to see the value of 'exists' I see two line the first false the second is true, so there must be an error with the recursion I am creating
Your problem seems to be that you don't use the result of the recursively called function.
Also, you shouldn't use arguments.callee, but a function name, and potentially check for the parameters to be objects before enumerating their properties. And you might want to check also for properties of destination that are not in the enumerated source.
Try this:
function equal(destination, source) {
if (Object(destination)!==destination || Object(source)!==source)
// at least one of them is a primitive value
return destination == source; // maybe use strict equality === ?
for (var prop in source)
if (!(prop in destination) || !equal(source[prop], destination[prop]))
return false;
return true;
}
You're making it more complicated than it needs to be:
function exists(destination, source) {
for (var property in source) {
if(destination.hasOwnProperty(property)) {
if (!exists(destination[property], source[property])) {
return false;
}
} else {
return false;
}
}
return true;
}​
Note that .hasOwnProperty means that this will only compare direct properties of the objects and not those inherited from prototypes. I assumed that this was what you were looking for.
Also note: it actually uses the result of the recursive calls, it recurses properly, it uses .hasOwnProperty instead of just checking falsiness, and it doesn't use intermediate variables to store the result (which wouldn't work in a recursion the way you were using them, anyway).
One more thing: This will only go "one way," i.e. any properties in the destination that are not in the source will not be checked. To check both ways, you have to call it twice or extend it to loop over both.

Categories

Resources