unique items from an observableArray of object properties

Posted by Joe on Stack Overflow See other posts from Stack Overflow or by Joe
Published on 2012-11-13T10:58:39Z Indexed on 2012/11/13 10:59 UTC
Read the original article Hit count: 286

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

© Stack Overflow or respective owner

Related posts about knockout.js

Related posts about filtering