Filter function for dom-repeat does not pass an array index

[w-p]

In the template documentation at:

https://www.polymer-project.org/1.0/docs/devguide/templates.html

under the section labeled:

Filtering and sorting lists

the following is stated:

filter. Specifies a filter callback function following the standard Array filter API.

The link provided refers to the MDN documention for Array.prototype.filter() which in turn specifies that the arguments to this function are as follows:

element, index, array

However, upon calling a filter function via a dom-repeat template element only the first argument, the element, is passed.

After a cursory review of:

https://github.com/Polymer/polymer/blob/master/src/lib/template/dom-repeat.html

I was unable to identify all of the Array.prototype.filter() arguments being passed as described in the documentation.

Am I missing something?

[kevinpschaaf]

You're correct, the documentation is wrong in stating it follows the standard API; it does not pass the index as you've noted. For the time being, we'll fix the documentation to be accurate per the implementation.

Due to how dom-repeat efficiently handles incremental inserts/removals, there are cases where passing the index from the original array when filtering would introduce inefficiency (specifically the case where the view is both filtered and sorted); however, in the more basic cases (only filter), we could pass the index. We'll keep this issue open to consider whether the inconsistency in when you would get the index would be a net positive or negative.

For help in judging priority, would you mind sharing your use case? Is it that you want to just show the first n items in the array?

[w-p]

I discovered this issue while building a control for paging through records of objects. Essentially, I wanted to display a slice of an array. I prototyped with this jsbin:

Polymer Array Index Demo

I think this illustrates the intent but I may be doing something backwards. I also ran into another surprise.

Although correctly documented, the observe attribute of the dom-repeat element observes only properties of objects within the array provided to the dom-repeat element. This seems logical but counter-intuitive. Of more use would be the ability to trigger sorting / filtering by observing values defined beyond this scope.

In my case, I'd like to observe the start and end indices to trigger a re-filtering of the data set such that only the specified 'page' of data is shown.

[kevinpschaaf]

Due to the API inconsistency that would result due to differences in when we can efficiently pass the index and when it would be prohibitive to do so (because the array is operating on sorted keys, see #2187 (comment)), we're electing to not address this now. Making this a documentation issue so that we can update the docs to indicate the differences between Array.prototype.filter.

[kevinpschaaf]

@arthurevans Can we please update the docs accordingly? Thanks.

[kevinpschaaf]

Ooops, I see this is a dupe and has been addressed via Polymer/old-docs-site#1381.