How to get distinct values from JSON object property for dropdown options using ng-options and use it as a filter?

Question

I am trying to make a multiple selection list with a dropdown above it as a filter. The value of the dropdown above contains the department name that will then display its employees in the list below according to the selected department above.

Here is my scope:

var self = this;
 self.users = [{ department: "A", name: "santos" }, { department: "B", name: "suarez" }, { department: "C", name: "domingo" }, { department: "A", name: "james" }, { department: "B", name: "black" }, { department: "C", name: "de leon" }, { department: "A", name: "dela cruz" }, { department: "B", name: "robertson" }, { department: "C", name: "williams" }, { department: "A", name: "crawford" },
 { department: "B", name: "garcia" }, { department: "C", name: "navarro" }, { department: "A", name: "lim" }, { department: "B", name: "lee" }, { department: "C", name: "vasquez" }, { department: "A", name: "montano" }, { department: "B", name: "trump" }, { department: "C", name: "arroyo" }, { department: "A", name: "aquino" }, { department: "B", name: "duterte" }];

and here is my html:

<select class="form-control" ng-options="item as item.department for item in formsDcfCtrl.users" ng-model="departmentsList">
 <option value="" selected>Departments</option>
 </select>

<select multiple class="form-control" ng-options="x as x.name for x in formsDcfCtrl.users | filter:departmentsList" ng-model="usersList"></select>

but I get different results:

the value of the list below is fine but the values of the dropdownlist is based from each of the values of the departments in the array:

and when I select a letter(department) from the dropdown, instead of ALL the names that are in department A, for example, will be showed in the list below, only the name whose specific value of department in that specific element in the selected dropdown value is displayed. How do I solve this?

Immanuel Kirubaharan · Accepted Answer · 2018-01-16 11:00:33Z

1

You can try with the below mentioned filter to get it resolved. Also check your given example working scenario with this plunker link.

Template:

ng-options="item as item.department for item in users | unique:'department'"

Controller:

app.filter('unique', function() {
    return function(input, key) {
        var unique = {};
        var uniqueList = [];
        for(var i = 0; i < input.length; i++){
            if(typeof unique[input[i][key]] == "undefined"){
                unique[input[i][key]] = "";
                uniqueList.push(input[i]);
            }
        }
        return uniqueList;
    };
});

answered Jan 16, 2018 at 11:00

Immanuel Kirubaharan

1,1041 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Elbert John Felipe Over a year ago

ok the unique filter works but when I select a value (A, B, C), not all the names in department is displayed.

Immanuel Kirubaharan Over a year ago

For that you should consider the department to be filtered in the multi-select users drop-down which I've made the correction with the same plunker. Please check..

Elbert John Felipe Over a year ago

oh thank you it works. So I am only missing the ".department" in my filter?

Immanuel Kirubaharan Over a year ago

Yeah right. Since you are considering model value to be filtered rather you should give the exact value to get filtered by mentioning the key from that object.

Elbert John Felipe Over a year ago

I just didn't know you can do that. I am new to Angular. thanks

|

Collectives™ on Stack Overflow

How to get distinct values from JSON object property for dropdown options using ng-options and use it as a filter?

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related