My Knockout Data Bind is Producing an Undefined Console Error

Question

I am filtering two drop downs using Knockout and I don't know why im seeing this console error.

Uncaught TypeError: Unable to process binding "value: function(){return $root.filter }" Message: Cannot read property 'length' of undefined

The issue is related to the return value, it filters the data correctly; However, console error keeps appearing, I've tried changing the following:

Changing $root to $data
Changing filter.Value to filter.ID()
Removing the brackets, just returning ID, and so far nothing is working?

The JS/Knockout:

    var self = this;
    self.filters = ko.observableArray(self.Model.Teams());
    self.filter = ko.observable('');
    self.items = ko.observableArray(self.Model.Users());
    self.filteredItems = ko.computed(function () {
        var filter = self.filter();
        if (!filter || filter == "All") {
            return self.items();
        } else {
            return ko.utils.arrayFilter(self.items(), function (i) {
                return i.ID() == filter.Value();
            });
        }
    });

This select dropdown:

<div>
        <select class="filter-dropdown-small" data-bind="options: $root.filters, value: $root.filter, optionsText: 'Text', optionsCaption: 'All'"></select>
</div>

Filters this one:

<div>
       ```<select class="filter-dropdown-small" data-bind="options: $root.filteredItems, optionsText: 'Text', optionsCaption: 'All'"></select>```
</div>

The data to filter with no console error.

codeflower codeflower · Accepted Answer · 2019-05-05T19:59:14

Because $root.filter was used in another partial injected into this HTML, this was a conflict causing the console error, renaming the filter portion of the JS and therefore the data bind on the first piece of html, this resolved the console error and therefore the problem.

My Knockout Data Bind is Producing an Undefined Console Error

1 Answers