Develop Reference

Call function if variable does not exist in a filter

I'm doing filtering on a data displayed in a view which is working correctly. I've placed a filter bar at the top of the screen where a user can filter the records. What I want to achieve is when the variable the user enters is not found in the records a function should be called
filterProducts(ev) {
this.productService.list = this.reOrderList;
const val = ev.target.value;
if (val && val.trim() !== '') {
this.productService.list = this.reOrderList.filter((item) => {
return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
});
} else {
// value doesn't exist console.log('call another function')
}
}

Check if any items are left in the array after the filter is complete:
if (this.productService.list.length) {
// The user's query was found in the array
} else {
// The user's query was not found in the array
}

Firebase API and Vue.JS get multiple elements by specific attributes value

How to get all elements in Firebase (child) which has the same category ID ?
getbyCateg: function(myCateg) {
var items = [];
FireBase.database().ref('product')
.orderByChild('category')
.equalTo(myCateg)
.once("value", function(snapshot) {
var key;
snapshot.forEach(function (childSnapshot) {
key = childSnapshot.key;
return true;
});
if (key) {
items.push(FireBase.database().ref('product').child(key).toString());
} else {
console.log("There is nothing of this category");
}
});
return (items);
.once allow to access the first element which has the good category ID, but what about the others ? I would like to create an array of all of these elements.
Thanks !

Without knowing your data structure, I am not sure what is your problem really. But maybe is this everything, you need:
getbyCateg: function(myCateg) {
var items = [];
FireBase.database().ref('product')
.orderByChild('category')
.equalTo(myCateg)
.once("value", function(snapshot) {
snapshot.forEach(function (childSnapshot) {
key = childSnapshot.key;
if (key) {
// also, try this items.push(key.toString()) instead of next line
items.push(FireBase.database().ref('product').child(key).toString());
} else {
console.log("There is nothing of this category");
}
});
});
return (items);
}

AngularJS 1.x NgTagsInput show message

I have this code using AngularJS and NGTagsInput.
I'm using Filter in AutoComplete, and you can add new itens pressing 'Enter', but i wanted show this message to user. If there is not a result in auto complete, show message: "No results found. Press Enter to Add"
I tried put a Else inside Filter. but does not work because he checks every single letter.
$scope.loadCountries = function($query) {
return $http.get('countries.json', { cache: true}).then(function(response) {
var countries = response.data;
return countries.filter(function(country) {
return country.name.toLowerCase().indexOf($query.toLowerCase()) != -1;
});
});
};
});
Here is a Plnkr: PLUNKR
Thanks for now ! =)

You just need to check if there are a returned item matched, in other way just check if the array filtered with that query has an item. If there are no matched item this mean no data :D
$scope.loadCountries = function($query) {
return $http.get('countries.json', { cache: true}).then(function(response) {
var countries = response.data;
var filtered = countries.filter(function(country) {
return country.name.toLowerCase().indexOf($query.toLowerCase()) != -1;
});
$scope.nodata = filtered.length === 0;
return filtered;
});
};
http://plnkr.co/edit/fo1lExzjz0eJxloaljd0?p=preview

AngularJS make a call to the database only after the user enters one character

I created an angular material autocomplete. Everything is working fine but now I am trying to modify the code and make a call to the database only after the user enter one character in the autocomplete box. The getEmployees function is making the http call to the database. I tried this but I am getting the error that seachText is undefined. Further on I am trying to pass the first letter from the autocomplete to the getEmployees. I created a project in Plunker: https://plnkr.co/edit/gLX5Tu0Jlvxh6T7HE6O3?p=preview
if(searchText != undefined || searchText != null)
{
getEmployees().then(function (users)
{
vm.employees = employees
})
}

in your code md-item-text="item.name" is there, but 'name' key is not there in your json.. use md-item-text="item.FirstName".. it will work

The code below is a bit rough, not DRY, but it essentially works so hopefully it may point you in the right direction
angular
.module('AutocompleteApp', ['ngMaterial'])
.controller('AutocompleteController', function($scope, $http, $filter) {
var vm = this;
// data for autocomplete
vm.getMatches = function(searchText) {
if (!vm.employees) {
getEmployees().then(function(employees) {
vm.employees = employees;
var term = searchText && searchText.toLowerCase();
if (!term) {
return [];
} else {
return $filter('filter')(vm.employees, term);
}
});
} else {
var term = searchText && searchText.toLowerCase();
if (!term) {
return [];
} else {
return $filter('filter')(vm.employees, term);
}
}
};
// how we get employee data
function getEmployees() {
return $http.get('employees.json').then(function(response) {
return response.data;
}, function failureCallback(response) {
reject("Error!");
});
}
});
https://plnkr.co/edit/QfHaZ6b3vFW57KeKBLhx?p=preview

Filtering through nested ng-repeats with custom filters

It seems like custom filters is what I'm going after here. There's a specific behavior I'm looking for when filtering out elements. I'm looking to make a unified search bar to return entire matching group names with all students failing a group name match, group names with just the matching students.
Here's my plunker with all the code
For example, by searching for "er" the results should be the entire listing of "FiddlER Crabs" and "FiERy Skippers" but "Golden Bears" should only show Drew ParkER and ERic.
The plunkr currently demonstrates the default filter behavior. If one changes the filter in the HTML to my custom filter, nestFilter on line 27, and follows the console logs, you can see that the returned array is updating with the addition and removal of search terms but the elements aren't being redrawn. Here's my filter
bootTracker.filter('nestFilter', function() {
return function(elements, input) {
var filteredCohorts, filteredCohortsStudents;
filteredCohorts = [];
filteredCohortsStudents = [];
console.log(elements);
angular.forEach(elements, function(cohort) {
var matchedStudents;
matchedStudents = [];
if (cohort.name.match(new RegExp(input, 'ig'))) {
filteredCohorts.push(cohort);
}
angular.forEach(cohort.students, function(student) {
if (student.name.match(new RegExp(input, 'ig'))) {
return matchedStudents.push(student);
}
});
cohort.students = matchedStudents;
if (cohort.students.length > 0) {
return filteredCohortsStudents.push(cohort);
}
});
console.log(filteredCohorts);
return filteredCohorts;
};
});

There are a couple of issues with your nestFilter, one of which was that you were modifying to original array (setting cohort.students = matchedStudents).
Here's a working version of the nestFilter (see this Plunker for a demo)
bootTracker.filter('nestFilter', function() {
return function(elements, input) {
var filteredCohorts = [];
console.log(elements);
angular.forEach(elements, function(element) {
if (element.name.match(new RegExp(input, 'ig'))) {
filteredCohorts.push(element);
} else {
var matchedStudents = [];
angular.forEach(element.students, function(student) {
if (student.name.match(new RegExp(input, 'ig'))) {
matchedStudents.push(student);
}
});
if (matchedStudents.length > 0) {
var cohort = angular.extend({}, element);
cohort.students = matchedStudents;
filteredCohorts.push(cohort);
}
}
});
console.log(filteredCohorts);
return filteredCohorts;
};
});