CODEWITHSUNDEEP
javascriptknockout.js
aibarra
aibarra

Reputation: 419

Knockout.Js Array filter syntax

Just getting into javascript and knockout.js. I've found a bunch of examples of what I'm trying to accomplish. And I feel like there is a small syntax error I may be overlooking. I'm trying to filter a set already returned (this.tasks) from a server via ajax/json. I have that working fine. What I would like to do, is have users be able to switch between complete and incomplete tasks.

I switched the code to just run the foreach loop on tasksFiltered. "this.done" is either true or false.

Task template

var taskModel = function(id, title, description, done){
    var self = this;
    this.id = ko.observable(id);
    this.title = ko.observable(title);
    this.description = ko.observable(description);
    this.done = ko.observable(done);

    this.showEdit = ko.observable(false);
    this.titleUpdate = ko.observable(false);
    this.descriptionUpdate = ko.observable(false);
};

Page Model

var pageModelTasks = function(){
    var self = this;
    this.task_title = ko.observable("");
    this.task_description = ko.observable("");
        this.task_title_focus = ko.observable(true);
    this.tasks = ko.observableArray([]);

    this.tasksFiltered = ko.computed(function() {
        return ko.utils.arrayFilter(this.tasks, function(Task) {
        return Task.done == true;
      });
    });

   // CRUD functions excluded 
};

this doesn't work.

Upvotes: 4

Views: 18056

Answers (3)

Vinney Kelly
Vinney Kelly

Reputation: 5095

Two minor corrections to your code. First, as @XGreen mentioned, you need to pass the array value, not the observableArray instance, as the first parameter of the arrayFilter function. Lastly, because Task.done is observable, you need to invoke the member to get the value. Here's the modified code:

this.tasksFiltered = ko.computed(function() {
    return ko.utils.arrayFilter(this.tasks(), function(Task) {
        return Task.done() === true;
    });
});

Upvotes: 10

Anil Singh
Anil Singh

Reputation: 4212

It might help you

if (myList().length > 0) {
    var text= this.filter().toLowerCase();
    return ko.utils.arrayFilter(myList(), function (item) {
                if (item.Label.toLowerCase().indexOf(text) > -1 || item.Desc.toLowerCase().indexOf(text) > -1) {
                    return true;
                 }
                 else {
                     return false;
                 }
          });
}

Upvotes: 0

Ivan Rodriguez
Ivan Rodriguez

Reputation: 436

The second solution has a problem with the method ko.utils.stringStartsWith.

ko.utils.stringStartsWith missing in release file.

You can use this code:

  var stringStartsWith = function (string, startsWith) {          
        string = string || "";
        if (startsWith.length > string.length)
            return false;
        return string.substring(0, startsWith.length) === startsWith;
    };

See Issue Link

Upvotes: 1

Related Questions