Advanced AngularJS live Search - javascript

I have the following data
persons = [
{
"age":20,
"parameter1":94,
"name":"Foobarin"
},
{
"age":33,
"parameter1":49,
"name":"Johan"
}
]
I want to create an advanced live search which recognizes patterns. An examples could be "foo a20 p94" which would get me the first object.
a20 - Search where age is 20
p94 - Search where parameter1 is 94
and then if there is any other text which does not have any set prefix then test that against the name value.
All the values (except name which is case-insensitive) is of type integer. I want to limit the prefixes to predefined such as a, p and not age20.
The data-sets is around 400.
I've created a basic live search which searches all variables in the object, but now I do not know where to continue. Any ideas?

It's not foolproof but as a first-pass this is what I'd start with, I'll try to talk through it in pseudo.
First declare a propertyMatrix, a simple object-map which can point "prefixes" to the actual property names which exist within person. The searchPersons function accepts a single string (query) value and consists of two main parts:
The query string is split on whitespace characters into an array of "tokens". Each token is also an array of exactly 2 length, containing each token name and token value. At this stage it attempts find the predetermined prefix - if no such entry exists the token name: name is assumed.
A filter is then applied to the persons array. For each person we iterate over the tokens array and make an appropriate comparison, if any single check fails we return false (thus excluding the person from the results).
var propertyMatrix = {
'a': 'age',
'p': 'parameter1'
},
searchPersons = function(query){
var tokens = query.split(/\s+/).map(function(t){
t = t.toLowerCase();
var i = t.match(/\d+$/), p;
if(i && i.length) {
p = t.substring(0, t.indexOf(i));
if(p in propertyMatrix)
return [propertyMatrix[p], parseInt(i, 10)];
}
return ['name', t];
}),
result = persons.filter(function(p){
for(var i=0, l=tokens.length; i<l; i++){
var token = tokens[i][0], value = tokens[i][1];
if(!(token in p)) return false;
if(token === 'name'){
if(p.name.toLowerCase().indexOf(value)<0) return false;
} else if(p[token] !== value) return false;
}
return true;
});
return result;
};
fiddle

Related

Custom function in google sheet using indexOf

I've got a list of emails that I need to clean and identify which of these emails are company emails (i.e info#, hello#, etc)
I've had an idea to add rows in one google sheet, then check this against another google sheet with a column of company alias'. This will then return Trueof False in the column Company Alias? in the Input sheet.
Here is my Google sheet example.
I think it needs to iterate through the values of the second sheet and compare for email 1 field in the first sheet to see if it contains that value. I have made an apps script below:
function CHECKALIAS(x) {
var app = SpreadsheetApp;
var aliasSheet = app.getActive().getSheetByName('Company_Alias').getRange(2, 1, 45, 1);
var aliasRange = aliasSheet.getValues();
var str = x;
if(str.indexOf(aliasRange) !== -1){
return false;
} else {
return true;
}
}
I get the below error:
TypeError: Cannot read property 'indexOf' of undefined (line 13, file "Code")
Are you running the function without passing it a value? It's giving you the error because str has no value.
Anyway, there's no need for a custom function here. This will return true if there's a match with one of the aliases.
=REGEXMATCH(A1, JOIN("|",FILTER(Company_Alias!A2:A, NOT(ISBLANK(Company_Alias!A2:A)))))
str is a string and aliasRange is an array. Instead of searching for the array in the string, you should search for the string in the array.
Another problem is that .getValues​​() returns an array of arrays:
[["info #"], ["support #"], ["sales #"], ...].
To transform it into a 1D array, use the flat() function:
function CHECKALIAS(x) {
let app = SpreadsheetApp;
let aliasSheet = app.getActive().getSheetByName('Company_Alias').getRange(2, 1, 45, 1);
let aliasRange = aliasSheet.getValues().flat(); // Transforms 2D array in 1D
let userDomain = x.split('#'); // split "admin#somedomain.com" into [ "admin", "somedomain.com" ]
let usr = userDomain[0] + '#'; // "admin#
return aliasRange.indexOf(usr) !== -1; // Is usr in aliasRange?
}

Replace object keys with values in given string pattern

I have a task to replace all keys in string pattern with their values. The input is something like that:
[
'{ "name": "John", "age": 13 }',
"My name is #{name} and I am #{age}-years-old"
]
And the output is this: 'My name is John and I am 13-years-old'.
So I come up with this:
function FillTemplate() {
if (arguments.length < 2 || arguments.length > 7) {
console.log('The input objects should be at least 1 and lesser than 7!');
}
for (let i = 0; i <= arguments.length - 2; i += 1) {
JSON.parse(arguments[i]);
for (let j = 0; j < Object.keys(arguments[i]).length; i += 1) {
let currentKey = Object.keys(arguments[i])[j];
console.log(currentKey);
}
}
}
I have a problem when i console.log(currentKey) i got only zeros but my idea is take the first object in the input then json.parse it next take all the keys in that object and with one loop take every single key separately and replace it in the pattern string with regex pattern. But this Object.keys return only zeros to me. Where is the problem?
Here you go:
<script>
var foo = {
"name" : "John",
"age" : 13
}
var string = "My name is #{name} and I am #{age}-years-old";
// Extract all templates (#{name}, #{age}, ...)
var matches = string.match(/#{[a-zA-Z]+?}/g);
if ( matches ) {
matches.forEach(function(templateStringToReplace) {
// Strip the special characters to dynamically get the indices of the object
templateString = templateStringToReplace.replace(/#|{|}/g, "");
string = string.replace(templateStringToReplace, foo[templateString])
});
}
alert(string);
Try the other way around, parse the template string first, then loop over the keys you need so you can reference them directly in the object.
Also, I have no idea what you're trying to do with the arguments object.
// Our source array containing a data string and a template string
var source = [
'{"name": "John", "age": 13 }',
'My name is #{name} and I am #{age}-years-old'
],
// helper function to grab all the parameters from a template string
parseTemplate = function parseTemplate( template ) {
var regex = /#\{(.+?)\}/g,
parameters = [],
nextParameter;
do {
// this regexp will grab the next series of characters surrounded by #{}
nextParameter = regex.exec(template);
if (nextParameter) parameters.push(nextParameter[1]);
}
// as long as there are parameters left, keep searching
while (nextParameter);
return parameters;
},
// population function, uses parseTemplate to get the parameters and then adds them to the template
populateTemplate = function populate( template, data ) {
var parametersToSaturate = parseTemplate(template);
// for each parameter found, repalce that parameter in the string with the value from the data
return parametersToSaturate.reduce(function( saturatedTemplate, parameter ) {
return saturatedTemplate.replace('#{' + parameter + '}', data[parameter] || ('#{' + parameter + '}'));
}, template);
},
result = populateTemplate( source[1], JSON.parse(source[0]) );
console.log(result);
As long as you keep the array returned from parseTemplate is the same order, you can reuse any parameter as many times in a string as you want. Any #{val} parameter not found in the data will just remain.
If you have multiple objects, you can just loop over them.
sources.forEach(function( source ) {
console.log(populateTemplate( source[1], JSON.parse(source[0]) ));
});
If your browser supports it, you can use actual JS template strings:
https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Template_literals

Backbone.js filter

I'm trying to get a filter function to work properly. The function takes an array as param. The array containing all the filter params as ints. like for example: [2,36,11]. So the ints represent different filter options. Then i match this array elements with another int that comes as a variable. like 2 for example. so if 2 is in this array the filter should go on and do its thing.
The problem is that this function only works as long as the ints in the array not are higher than 9. So if one of the filter option is 12 it won't work. But lets say the array has an int wich is 1 and you choose the filer on filter option 12 it will accept that as a match and render wathever should be rendered, since indexOf takes it as a match. How can i solve this quite weird behaviour?
filter: function(f) {
var filter = this.collection.filter(function(o){
var accept = false;
$(f).each(function(i,val){
if(_.indexOf(o.get('tags'), val) >-1){
accept = true;
}
})
return accept;
});
var filtered = new PeopleCollection(filter);
new PeopleView({
el: this.$('.peoplelist'),
collection: filtered
});
}
So as tags is a string with the numbers you can split the sting on , and then do a straight comparison on each element against the val.
filter: function(f) {
var filter = this.collection.filter(function(o) {
var accept = false;
$(f).each(function(i, val) {
//only run if accept is false
if (!accept) {
//if tags is a string of numbers spereated by commas
//turn that string into array and test each one against the val
_.forEach(o.get('tags').split(","), function(tag) {
if (accept) {
return;
}
//use parseInt to ensure both are numbers
if (parseInt(tag) === parseInt(val)) {
accept = true;
}
});
}
})
return accept;
});
var filtered = new PeopleCollection(filter);
new PeopleView({
el: this.$('.peoplelist'),
collection: filtered
});
}
here is a quick fiddle using the same base concept, just removed the view part so open your console to see the results of each filter, http://jsfiddle.net/leighking2/gmtvt12p/
This happens because o.get('tags') is returning a String, as you mentioned in a comment.
Your use of _.indexOf(value, item) will work on any value that has a length property and can be accessed with array notation (e.g. value[0]). You can check it by looking at underscore's source code for indexOf function.
The String type of JavaScript fits this signature. You are actually executing your function over each character of the String:
'1,2,3'.length // 5
'1,2,3'[0] // '1'
'1,2,3'[1] // ','
This is why when you have the string "12" it will match either "1" or "2".
To convert your string to an array of numbers, you can do something like this:
'1,2,3'.split(',').map(function(x) { return parseInt(x, 10); }); // [1, 2, 3]
After this conversion, you can use _.indexOf as you expect.
So, try this:
filter: function(f) {
var filter = this.collection.filter(function(o){
var accept = false;
$(f).each(function(i,val){
var tags = o.get('tags').split(',').map(function(x) { // <-
return parseInt(x, 10); // <-
}); // <-
if(_.indexOf(tags, parseInt(val, 10)) >-1){ // <-
accept = true;
}
})
return accept;
});
var filtered = new PeopleCollection(filter);
new PeopleView({
el: this.$('.peoplelist'),
collection: filtered
});
}

jquery JSON array as localStorage item

Little change of my code and it's partially works :)
var db = {
hotels: JSON.parse(localStorage.getItem('table') || "[]"),
get objects() {return this.hotels},
set objects(obj) {
obj = this.hotels;
localStorage.setItem('table', JSON.stringify(obj))
}
}
jQuery(function(){
var count = localStorage.getItem('count');
if(!count) {
count = 0;
}
function Add(item){
var client = {
ID : jQuery(item).find("#txtID").val(),
Name : jQuery(item).find("#txtName").val(),
Photo : jQuery(item).find("#txtPhone").val(),
Link : jQuery(item).find("#txtEmail").val()
};
db.objects = db.objects.push(client);
count = count+1;
localStorage.setItem('count',count);
jQuery('.panel2 a span').text('('+ localStorage.getItem('count') +')');
jQuery(item).find('.add_rem').hide();
jQuery(item).find('.remove').show();
jQuery("#tblList .empty").hide();
jQuery("#tblList").find('li:gt(0)').remove();
jQuery.each(db.objects,function(i,element) {
jQuery("#tblList").append("<li class='added"+db.objects[i].ID+"'>"+
"<img src='../../images/general/delete.gif' alt='Delete"+i+"' class='delete'/>" +
"<a href='"+db.objects[i].Link+"' title='"+db.objects[i].Name+"'>"+
" <img src='"+db.objects[i].Photo+"' alt='"+db.objects[i].Name+"'>" +
" <span>"+db.objects[i].Name+"</span>" +
" </a>" +
"</li>");
})
return true;
}
function Delete(item){
jQuery(item).prev('.add_rem').show();
jQuery(item).find('.remove').hide();
jQuery(item).find('.remove').removeAttr('alt');
}
function List(){
if(count > 0) {
jQuery("#tblList .empty").hide();
jQuery('.panel2 a span').text('('+ localStorage.getItem('count') +')');
}
for(var i= 0; i<= count; i++) {
var cli = JSON.parse(db.hotels);
if(cli[i] != null){
jQuery("#"+cli[i].ID).find('.add_rem').hide();
jQuery("#"+cli[i].ID).find('.remove').show();
jQuery("#"+cli[i].ID).find('.remove').attr('alt','Delete'+i);
jQuery("#tblList").append("<li class='added"+cli[i].ID+"'>"+
"<img src='../../images/general/delete.gif' alt='Delete"+i+"' class='delete'/>" +
"<a href='"+cli[i].Link+"' title='"+cli[i].Name+"'>"+
" <img src='"+cli[i].Photo+"' alt='"+cli[i].Name+"'>" +
" <span>"+cli[i].Name+"</span>" +
" </a>" +
"</li>");
}
}
}
jQuery("#frmCadastre").bind('submit',function(e){
e.preventDefault()
return Add(this);
});
List();
jQuery(".remove, .delete").bind("click", function(e){
e.preventDefault();
Delete(this);
List();
});
})
now my question is how to push element to array after page refresh this is located in function Add()
array looks like this
"["{"ID":"1","Name":"test","photo":"/link/to/photo.jpg"}"]"
and if i add another element before page refresh it works great
"["{"ID":"0","Name":"test0","photo":"/link/to/photo0.jpg"}","{"ID":"1","Name":"test1","photo":"/link/to/photo1.jpg"}"]"
but if i Reload page and try to add an element Firebug is throwing:
`TypeError: db.objects.push is not a function
db.objects = db.objects.push(client);`
We will start to clear out what happens with HTML5 Local Storage. Local storage is a place in your disk defined by every browser that supports it. These places may be different for every browser. They hold tuples with keys and values, both strings. If you want to save a whole object to the disk, you must serialize it. That means you have to transform it into an array of data, in our case chars -> string. In javascript the most common object serialize function is JSON.stringify. Its input is a valid JSON object, which in our case is an array and it will make it into a string using the literals you use to initialize an object like {x:5}. JSON.stringify([{x:5},{x:6},{x:7}]) will have the following output: "[{x:5},{x:6},{x:7}]". And to reconstruct your object from a string you use JSON.parse(x) where x is a valid json string. You want now to have an array of objects, the first thing you'll think of is to serialize your array you have as a var in your program and add a special key you remember to store it into your disk. Each browser has seperate localStorage for every site that is hosted by a server.
An example that stores a value bound to a key in localstorage is this:
localStorage.setItem('x','5');
localStorage['x'] = 5;
localStorage.x = 5;
all of them do the same thing, and their speed is in descending order. Now you have at Chrome->resources->localstorage:
+-------------------+
| Key | Value |
+---------+---------+
| x | "5" |
+---------+---------+
When you make your first visit to the page, you have nothing in localStorage, so you must have some initial values. Trying to get a value by:
return localStorage.getItem('x');
return localStorage['x'];
return localStorage.x;
will give you undefined. There is a nice operator made in javascript and is the ||.
null || 5 //returns 5
undefined || 3.14 //returns 3.14
'' || 6 //returns 6
[] || {} //returns []
If the left operand "exists", return it, else return the right one. This makes things faster with localStorage.getItem('x') || 5 so if a tuple with key x exists it will return the value of the item with the specified key, else it will return the 5, which is our initial value.
Let's get back to the localStorage again. Remember the tuples are saved into the disk, which is vastly slower to access than things in ram. If I want to read the value of an item in the localStorage let say in a loop, several times, should I read it directly from the disk, or should I read it once from the disk and save it into ram to access it faster? You surely know what makes more sense...So I must have a variable that is the clone of the one in the localStorage. Let's say I name it private_var. It must have an initial value which will be:
var private_array = JSON.parse(localStorage.getItem('array')) || [];
When you want to change your array in localstorage (e.g pushed an item) you use:
private_array.push(item)
localStorage.setItem('array', JSON.stringify(private_array))
Your localstorage will be like:
+---------+-----------------------------------------+
| Key | Value |
+---------+-----------------------------------------+
| array | [{"name":"george", "surname":"bush"}] |
+---------+-----------------------------------------+
To make things faster in terms of code production, not program speed you can define setters and getters.
var obj = {
temp: 5,
get x( ) { return this.temp },
set x(value) { this.temp = value }
}
we have an object named obj, a member temp and a setter and a getter function, just like in some java code. You can check obj.temp === 5. These special operators allow us to write
obj.x = obj.x + 6;
and it will be executed as something like this:
obj.set_x(obj.get_x() + 6);
So let's say you have an interface named db (database, similar to what a locastorage is) and a "private member" which is clearly not. You can see an implementation at http://ejohn.org/blog/javascript-getters-and-setters/ with __define(G/S)etter__ which has real private member, but this one is surely faster to write and more readable.
var db = {
cl_arr: JSON.parse(localStorage.getItem('array')) || [],
get clients( ) { return this.cl_arr },
set clients(v) {
localStorage.setItem('array', JSON.stringify(this.cl_arr));
if(v.constructor === Array) { this.cl_arr = v }
}
}
so when I execute:
db.clients.filter(function(client) { return client.money > 1000 });
this will be executed
db.get_clients().filter...;
And when I try to change the array, I will write this
db.clients = db.clients.push(client);
Even if the push method can change the array, only the get function will be triggered so only the "private" cl_arr variable will change, to trigger the setter which updates our localStorage too I have to write the db.clients = ...

Backbone.js - Filter a Collection based on an Array containing multiple keywords

I'm using Backbone.js/Underscore.js to render a HTML table which filters as you type into a textbox. In this case it's a basic telephone directory.
The content for the table comes from a Collection populated by a JSON file.
A basic example of the JSON file is below:
[{
"Name":"Sales and Services",
"Department":"Small Business",
"Extension":"45446",
},
{
"Name":"Technical Support",
"Department":"Small Business",
"Extension":"18800",
},
{
"Name":"Research and Development",
"Department":"Mid Market",
"Extension":"75752",
}]
I convert the text box value to lower case and then pass it's value along with the Collection to this function, I then assign the returned value to a new Collection and use that to re-render the page.
filterTable = function(collection, filterValue) {
var filteredCollection;
if (filterValue === "") {
return collection.toJSON();
}
return filteredCollection = collection.filter(function(data) {
return _.some(_.values(data.toJSON()), function(value) {
value = (!isNaN(value) ? value.toString() : value.toLowerCase());
return value.indexOf(filterValue) >= 0;
});
});
};
The trouble is that the function is literal. To find the "Sales and Services" department from my example I'd have to type exactly that, or maybe just "Sales" or "Services". I couldn't type "sal serv" and still find it which is what I want to be able to do.
I've already written some javascript that seems pretty reliable at dividing up the text into an array of Words (now updated to code in use).
toWords = function(text) {
text = text.toLowerCase();
text = text.replace(/[^A-Za-z_0-9#.]/g, ' ');
text = text.replace(/[\s]+/g, ' ').replace(/\s\s*$/, '');
text = text.split(new RegExp("\\s+"));
var newsplit = [];
for (var index in text) {
if (text[index]) {
newsplit.push(text[index]);
};
};
text = newsplit;
return text;
};
I want to loop through each word in the "split" array and check to see if each word exists in one of the key/values. As long as all words exist then it would pass the truth iterator and get added to the Collection and rendered in the table.
So in my example if I typed "sal serv" it would find that both of those strings exist within the Name of the first item and it would be returned.
However if I typed "sales business" this would not be returned as although both the values do appear in that item, the same two words do not exist in the Name section.
I'm just not sure how to write this in Backbone/Underscore, or even if this is the best way to do it. I looked at the documentation and wasn't sure what function would be easiest.
I hope this makes sense. I'm a little new to Javascript and I realise I've dived into the deep-end but learning is the fun part ;-)
I can provide more code or maybe a JSFiddle if needed.
Using underscore's any and all make this relatively easy. Here's the gist of it:
var toWords = function(text) {
//Do any fancy cleanup and split to words
//I'm just doing a simple split by spaces.
return text.toLowerCase().split(/\s+/);
};
var partialMatch = function(original, fragment) {
//get the words of each input string
var origWords = toWords(original + ""), //force to string
fragWords = toWords(fragment);
//if all words in the fragment match any of the original words,
//returns true, otherwise false
return _.all(fragWords, function(frag) {
return _.any(origWords, function(orig) {
return orig && orig.indexOf(frag) >= 0;
});
});
};
//here's your original filterTable function slightly simplified
var filterTable = function(collection, filterValue) {
if (filterValue === "") {
return collection.toJSON();
}
return collection.filter(function(data) {
return _.some(_.values(data.toJSON()), function(value) {
return partialMatch(value, filterValue);
});
});
};
Note: This method is computationally pretty inefficient, as it involves first looping over all the items in the collection, then all the fields of each item, then all words in that item value. In addition there are a few nested functions declared inside loops, so the memory footprint is not optimal. If you have a small set of data, that should be OK, but if needed, there's a number of optimizations that can be done. I might come back later and edit this a bit, if I have time.
/code samples not tested

Categories