Search code examples
polymerpolymer-1.0polymer-1.xiron-elements

How to filter an iron-list in polymer 1.0?

The dom-repeat element offers a filter attribute.

Is there a similar way to filter with iron-list?

For example: Given a list of people, I want to filter the ones born in a specific city.

Solution

  • As iron-list unfortunately doesn't offer a filter attribute, there is no declarative pattern making this possible.

    You can either implement your own simple list element making use of dom-repeat's filter property. (With element inheritance coming back in future releases, you might extend iron-list).

    However, the best practice I currently see is the use of a computed property:

    <template>
  <iron-list items="[[filterItems(items)]]" as="item">
    ...
  </iron-list>
</template>

<script>
Polymer({
  ...
  filterItems: function (items) {
    return items.filter(function (item) { // Array.prototype.filter
      return item.priority > 8; // Filter condition
    });
  }
});
</script>