I'm trying to extract unique properties from a knockout.js observableArray of objects, to populate a drop menu. Being new to knockout, I'm really struggling with this!
I want to iterate over a contacts list, and populate a drop menu with a unique value from each person object within the observableArray. So in my code example below, I wish to populate my drop menu with a list of people 'type' - family, friend etc.
Looking on Google, I found a similar function, but it does not return any values, even if I console.log the results?
//dummy data more rows in actual code...
var people = [
{ name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "
[email protected]", type: "family" },
{ name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "
[email protected]", type: "friend" }
];
function ContactsViewModel(people) {
var self = this;
self.contacts =
ko.observableArray(people);
self.uniqueSelect =
ko.dependentObservable(function() {
return(
ko.utils.arrayGetDistinctValues(self.contacts().type).sort());
}, self);
};
ko.applyBindings(new ContactsViewModel());
And HTML template
<p>Show me: <select data-bind="options: ContactsViewModel.uniqueSelect"></select></p>
Any help appreciated, as a noob I'm lost! Thanks
