Inner Filter Not Working Properly In Knockout Js

I have array of static data sized 3. I am displaying array in right side. There's one textbox above it for filter. I have taken 2 models for it. One is field and second is subfield

Solution 1:

Problem is in condition which you are using for filtering data.As you have more then two subfield so for every match of subfield same data pushed into arr that is the main reason of getting unexpected result.

self.filteredList = ko.computed(function() {
  var filter = self.filter(),
  arr = [];
if (filter) {
  ko.utils.arrayForEach(self.controlFields(), function(item) {
    if (item.code().match(filter) || item.title().toLowerCase().match(filter.toLowerCase())) {
      arr.push(item);
    }
      ko.utils.arrayForEach(item.subFields(), function(sf) {
        if (sf.title().toLowerCase().match(filter.toLowerCase())) {
          var found = ko.utils.arrayFirst(arr, function(k) {
            return item.title() === k.title() && item.code()===k.code();
          });
          if (!found) {
            arr.push(item);
          }
        }
      });

   });
  } else {
   arr = self.controlFields();
  }
 return arr;
});

Demo