Question

I have this structure:

MyApp.User = function()
{
    var self = this;
    self.ID = ko.obervable();
    self.Name = ko.obervable();
    self.LastName = ko.observable();
}

MyApp.UserHub = function()
{
    self.users = ko.observableArray();

     $.getJSON("url", function (data) {
         var mappedUser = $.map(data.UsersFromJson, function (item) {
             return new MyApp.User(item);
         });
         self.users(mappedUsers);
     });
}

I have a observableArray, which I populated using a HTML Request and a JSON (That works just fine). The thing is that I want to be able to search in that observableArray a user, providing information that can be contained in the LastName or in the FirstName. Something like this:

self.searchedUsers = ko.observableArray();
for(var item in users)
{
    if(item.FirstName.Contains(query) || item.LastName.Contains(query))
    {
         self.searchedUser.push(item);
    }
}

Query is the input text value that I want to search. Can anyone help to iterate that ObservableArray?

Answer 1

Generally, you would want to create a computed observable to represent a filtered version of your array.

So, you would have something like:

self.users = ko.observableArray();
self.query = ko.observable();
self.filteredUsers = ko.computed(function() {
    var query = self.query();    

    return ko.utils.arrayFilter(self.users(), function(user) {
        return user.FirstName.indexOf(query) > -1 || user.LastName.indexOf(query) > -1;
    });
});