Why I get empty object in result?

Question

I have Angular JS code with filter:

.filter('filterSelectOptionAllowed', function () {

            var allowed = {1: [0, 1, 2, 3, 4], 2: [0, 1, 2, 3, 4], 3: [1, 2, 3, 4]};
            var d = {};

            return function (num, account) {
                angular.forEach(num, function (item, key) {
                    var arrElem = allowed[account];

                    if (arrElem.indexOf(key) > -1) {
                        d[key] = item;
                    }
                });

                return d;
            };
        });

acount is 3. So, I check if key exists in array arrElem I add this element to object d. Why do I get empty object d in return?

I tried too:

return function (num, account) {
                var arrElem = allowed[account];
                angular.forEach(num, function (item, key) {
                    if ($.inArray(parseInt(key), arrElem ) > -1 ){
                        d[key] = item;
                    }
                });

                return d;
            };

Using numbers as keys is forbidden with javascript. It screws up array referencing. See: http://stackoverflow.com/questions/8758715/using-number-as-index-json — Mike Robinson, Oct 08 '15 at 18:14
That each statement looks logically wrong. `var arrElem = allowed[account];` will always be the same. It should either be outside the each, or corrected. — Kevin B, Oct 08 '15 at 18:18
@MikeRobinson we aren't dealing with json here. numbers as indexes of objects is just fine, they get converted to strings just like everything else. `var x = {1: 'foo'}; console.log(x[1], x['1']); // 'foo', 'foo'` — Kevin B, Oct 08 '15 at 18:20

score 0 · Answer 1 · answered Oct 08 '15 at 19:05

As mentioned in the comments key is a string so you need to type cast it for indexOf method with parseInt.

Please have a look at the demo below or in this fiddle. I'm not sure if the input data is correct because you haven't added it in your question but the filter now returns an object.

angular.module('demoApp', [])
 .controller('MainController', MainController)
 .filter('filterSelectOptionAllowed', function () {

            var allowed = {1: [0, 1, 2, 3, 4], 2: [0, 1, 2, 3, 4], 3: [1, 2, 3, 4]};
            var d = {};

            return function (num, account) {
                console.log(num, account);
                var arrElem = allowed[account];
                
                angular.forEach(num, function (item, key) {
                    //console.log('arrel', arrElem, key, arrElem.indexOf(key), item, typeof key);
                    if (arrElem.indexOf(parseInt(key)) > -1) {
                        console.log('item', item);
                        d[key] = item;
                    }
                });

                return d;
            };
        });

function MainController($filter) {
    var elements = this.input = {0: "name", 1: "name2", 3: "name3"};
 console.log($filter('filterSelectOptionAllowed')(elements, 3));
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="MainController as ctrl">
  input data: {{ctrl.input}}<br/>
  filtered: {{ctrl.input | filterSelectOptionAllowed: 3}}
</div>

Why I get empty object in result?

1 Answers1