angularjs watch for change in multidimensional array - angularjs

Question

i have these array object
$scope.alterations = {
'collar' : { name: 'collar', selected: false, qualitative: 'Perfect' },
'chest' : { name: 'chest', selected: false, qualitative: 'Perfect' },
'shoulder' : { name: 'shoulder', selected: false, qualitative: 'Perfect' },
'waist' : { name: 'waist', selected: false, qualitative: 'Perfect' },
'hips' : { name: 'hips', selected: false, qualitative: 'Perfect' },
'sleeve' : { name: 'sleeve', selected: false, qualitative: 'Perfect' },
'biceps' : { name: 'biceps', selected: false, qualitative: 'Perfect' },
'wrist' : { name: 'wrist', selected: false, qualitative: 'Perfect' },
'length' : { name: 'length', selected: false, qualitative: 'Perfect' },
};
// watch alterations for changes
$scope.$watch('alterations|filter:{selected:true}', function (nv) {
$scope.alter = nv.map(function (alterations) {
return alterations;
}); }, true);
what do i need to change in my filter if i want to only get areas with selected:true in the array?
i got these error for the map method
TypeError: Object #<Object> has no method 'map'
update :
before this its working with these array structure :
$scope.alterations = [
{ name: 'collar', selected: false, qualitative: 'Perfect' },
{ name: 'chest', selected: false, qualitative: 'Perfect' },
{ name: 'shoulder', selected: false, qualitative: 'Perfect' },
{ name: 'waist', selected: false, qualitative: 'Perfect' },
{ name: 'hips', selected: false, qualitative: 'Perfect' },
{ name: 'sleeve length', selected: false, qualitative: 'Perfect' },
{ name: 'biceps', selected: false, qualitative: 'Perfect' },
{ name: 'wrist', selected: false, qualitative: 'Perfect' },
{ name: 'shirt length', selected: false, qualitative: 'Perfect' }
];

Answer 1

Give this js fiddle a try, it's using your new data structure. http://jsfiddle.net/8mXD7/ I've included the change below. See the jsfiddle for the full code.
// watch alterations for changes
$scope.$watch('alterations|filter:{selected:true}', function (nv, ov, scope) {
$scope.alter = [];
angular.forEach(nv, function (value, key) {
if (value.selected == true) {
this.push(value);
}
}, $scope.alter);
}, true);
I got rid of the map, and replaced it with a angular.forEach. This also means you don't need the reference to the full jquery library, and you can just use the built in jqlite.
UPDATED WITH ALTERNATE
Here is an alternate approach with a custom filter function. Notice you need to register the filter with the moddule and update your ng-app to point to the new module.
http://jsfiddle.net/TpM4T/ - see the jsfiddle for the full source, this code is different than the code used above.
angular.module('example', []).
filter('customFilter', function () {
return function (arr) {
var alter = [];
angular.forEach(arr, function (value, key) {
if (value.selected == true) {
this.push(value);
}
}, alter);
return alter;
}
});
UPDATED WITH ANOTHER ALTERNATE
This approach uses the filter service, and actually prevents one of the NAIVE array copies.
http://jsfiddle.net/Qxew8/ - this example demonstrates just a regular function that could be used as a function or a filter.
angular.module('example', []).
filter('customFilter', function () {
return makeArrayOfSelected
});
function makeArrayOfSelected(arr) {
var alter = [];
angular.forEach(arr, function (value, key) {
if (value.selected == true) {
this.push(value);
}
}, alter);
return alter;
};
So in the watch it just calls the filter service:
// watch alterations for changes
$scope.$watch('alterations', function (nv, ov, scope) {
$scope.alter = $filter("customFilter")(nv);
}, true);