Ngtable: sort and filter on a nested object

Question

I have a list of objects to display in a table with ngTable. My object looks like this:

obj {label:string, nestObj{nestLabel:string } } 

In my controller, I want to enable sorting and filtering by the fields 'label' and 'nestObject.label'. I tried this:

 $scope.tableParams = new ngTableParams({ page: 1, // show first page count: 10, filter: { label='', nestObj.label='' }, sorting: { label: 'asc', nestObj.label: 'asc' } }, { total: data.length, // length of data getData: function($defer, params) { // use build-in angular filter var filteredData = params.filter() ? $filter('filter')(data, params.filter()) : data; var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : data; params.total(orderedData.length); // set total for recalc pagination $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); } }); 

But I get an error, the javascript compiler does not like the filter on nestObj.label:

Uncaugth syntexError: unexpected token.

IT works well if I do not filter and sort nestObj.label.

Is it possible to filter and sort by nested object using ngTable?

Here are the plunker that illustrate the problem.

Thanks.

Answer 1

Unfortunately, filtering and sorting with nested objects is not suitable for ng-table now. Reading this post and the solution from @ Bones Mololkin , I finally figured out how to avoid this error and the solution in the end is very simple. Thanks a lot to him!

I just rewrote the array where your data is: initialized a new property and set the data from the attached object to the new property, for example:

 for (var i = 0; i < data.length; i++) { data[i].town = ""; //initialization of new property data[i].town = data[i].adresse.town; //set the data from nested obj into new property } 

You can see this solution here on plunker , now it works like a charm ...

Answer 2

Just adding my two cents when I came across, don't be afraid to use functional programming. Data smoothing is simple and, in my opinion, cleaner:

 var flattenedArray = dataArray.map(function(obj) { return { label: obj.label, nestedLabel: dataItem.nestedObj.nestedLabel }; }); 

Then you can sort by label and nestedLabel in ngTable with ease.

Note. I understand that we are making copies here, so a bit more memory is consumed.

Answer 3

The following is the getData method for supporting nested parameters and additional support for organizing and swapping. You need to enter $filter and rename myData using your own data array. Hope this helps.

 $scope.tableParams = new NgTableParams({}, { getData: function($defer, params) { // organize filter as $filter understand it (graph object) var filters = {}; angular.forEach(params.filter(), function(val,key){ var filter = filters; var parts = key.split('.'); for (var i=0;i<parts.length;i++){ if (i!=parts.length-1) { filter[parts[i]] = {}; filter = filter[parts[i]]; } else { filter[parts[i]] = val; } } }) // filter with $filter (don't forget to inject it) var filteredDatas = params.filter() ? $filter('filter')(myDatas, filters) : myDatas; // ordering var sorting = params.sorting(); var key = sorting ? Object.keys(sorting)[0] : null; var orderedDatas = sorting ? $filter('orderBy')(filteredDatas, key, sorting[key] == 'desc') : filteredDatas; // get for the wanted subset var splitedDatas = orderedDatas.slice((params.page() - 1) * params.count(), params.page() * params.count()); params.total(splitedDatas.length); // resolve the ngTable promise $defer.resolve(splitedDatas); } });