AngularJS Filter on nested properties - angularjs

Question

I would like to create a filter on nested objects like this:
Object 1 :
property1
property2
property3
children : Child 1 :
propertyChild1
propertyChild2
Child 2 :
And so on. An object can have multiple child. There is no depth limit specified.The problem is that I want to search only on certain properties of the object so I used:
ng-repeat="groupLevel1 in groupLevel2.children | filter: {lineDescription: searchKeyword}"
This is searching on all levels but if a parent does not contain the searchKeyword, all the children (which may contain the search) aren't displayed. I want that all parent levels are displayed in order to display the children that contains the search keyword even if the parents do not match the search.
I tried some complicated script but it does not work:
appReportingHoliday.filter('globalFilter', function(){
return function(array, predicate){
return array.filter(function(val){
var formattedObj = parseFloatInternational(predicate);
var re = new RegExp(formattedObj, 'i');
var initialArray = [];
initialArray.push(val);
var childIsNeeded = false;
var toReturnTemp;
var parents = [];
var toReturn = [];
while(initialArray!=null){
angular.forEach(initialArray, function (currentVal) {
toReturnTemp = false;
//We check if the val is concerned by the search
toReturnTemp = re.test(currentVal.lineDescription) || re.test(currentVal.acquiredHolidays) || re.test(currentVal.tokenHolidays) || re.test(currentVal.availableHolidays)
|| re.test(currentVal.dailyCost) || re.test(currentVal.valuation);
if (toReturnTemp) {
//if it is, we need to add the result to the toReturn array and also the parents that we could have saved in the according array
toReturn.push(currentVal);
toReturn.push(parents);
parents = [];
}
else {
//else we save it in the parents array if a child is needed
if(currentVal.children!=null) {
parents.push(currentVal);
}
}
var index = initialArray.indexOf(currentVal);
initialArray.splice(index, 1);
if(currentVal.children!=null) {
angular.forEach(currentVal.children, function (currentChild) {
initialArray.push(currentChild);
});
}
});
if(initialArray.length==0) initialArray = null;
}
return toReturn;
});
}
});
The display is made like this:
<tr class="groupReportingTreeDatatable" ng-repeat-start="groupLevel3 in myData | filter: {lineDescription: searchKeyword}" ng-init="$index < 2 ? groupLevel3.hideRows = false : groupLevel3.hideRows = true;" ng-class-even="'dataTable_row1'" ng-class-odd="'dataTable_row2'" spinner-handler-directive="">
...
<tr class="groupReportingTreeDatatable" ng-hide="groupLevel3.hideRows" ng-init="groupLevel2.hideRows = true" ng-repeat-start="groupLevel2 in groupLevel3.children | filter: {lineDescription: searchKeyword}" ng-class-even="'dataTable_row1'" ng-class-odd="'dataTable_row2'">
...
<tr ng-hide="groupLevel2.hideRows || groupLevel3.hideRows" ng-repeat="groupLevel1 in groupLevel2.children | filter: {lineDescription: searchKeyword}" ng-class-even="'dataTable_row1'" ng-class-odd="'dataTable_row2'" ng-repeat-end="">
EDIT :
I tried something else which works for some searches but not all of them :(
appReportingHoliday.filter('globalFilter', function() {
return function (array, predicate) {
return array.filter(function (val) {
var formattedObj = parseFloatInternational(predicate);
var re = new RegExp(formattedObj, 'i');
var found = re.test(val.lineDescription) || re.test(val.acquiredHolidays) || re.test(val.tokenHolidays) || re.test(val.availableHolidays)
|| re.test(val.dailyCost) || re.test(val.valuation);
var child = val.children;
while(child!=null && found == false){
angular.forEach(child, function (currentChild) {
if(found == false) {
console.log(currentChild.lineDescription)
found = re.test(currentChild.lineDescription) || re.test(currentChild.acquiredHolidays) || re.test(currentChild.tokenHolidays) || re.test(currentChild.availableHolidays)
|| re.test(currentChild.dailyCost) || re.test(currentChild.valuation);
}
});
child = child.children;
}
return found;
});
}
});

Answer 1

Wouldn't it be easier to have a second variable where you flatten all of the children of the first one? You could define a recursive function doing that, something like...
var mainObject = ... ;//that's your object
var flattened = new Array();
function flatten(main,flat) {
var children = main.children;
for (var i=0;i<children.length;i++) {
flatten(children[i],flat); // recursive call, depth-first
delete children[i].children; // those are already treated
flat.push(children[i]); // add children
}
delete main.children;
flat.push(main);
}
Now you can filter on the properties directly.

Answer 2

I don't see how to integrate this in my code. I cannot change the base variable because I need it in this structure to display it on the screen. I can create another flattened array but the filter has to be applied on the var I display, no ? So I cannot use the flattened var. I have to admit I am a bit lost ^^
I fixed the depth to 3 to make it easier so now I have a this:
appReportingHoliday.filter('globalFilter', function() {
return function (array, predicate) {
return array.filter(function (val) {
var formattedObj = parseFloatInternational(predicate);
var re = new RegExp(formattedObj, 'i');
var found = re.test(val.lineDescription) || re.test(val.acquiredHolidays) || re.test(val.tokenHolidays) || re.test(val.availableHolidays)
|| re.test(val.dailyCost) || re.test(val.valuation);
var child = val.children;
if(child!=null && found == false){
angular.forEach(child, function (currentChild) {
if(found == false) {
found = re.test(currentChild.lineDescription) || re.test(currentChild.acquiredHolidays) || re.test(currentChild.tokenHolidays) || re.test(currentChild.availableHolidays)
|| re.test(currentChild.dailyCost) || re.test(currentChild.valuation);
}
if(currentChild.children!=null && found == false){
angular.forEach(currentChild.children, function (currentGrandChild) {
if(found == false) {
found = re.test(currentGrandChild.lineDescription) || re.test(currentGrandChild.acquiredHolidays) || re.test(currentGrandChild.tokenHolidays) || re.test(currentGrandChild.availableHolidays)
|| re.test(currentGrandChild.dailyCost) || re.test(currentGrandChild.valuation);
}
});
}
});
child = child.children;
}
return found;
});
}
});
The only problem that remains is that if the search is on a parent, I want all the child t be displayed but right now only the matched children are displayed :s I cannot find the parent from a child, I have only the link from parent to child not the other way around :s