vguillou / poly-filter

A fast and customizable solution for client side filtering of arrays, made with and for Polymer.
https://vguillou.github.io/webcomponents/poly-filter
MIT License
14 stars 3 forks source link

Filtering for contents of array in property #4

Closed bennypowers closed 7 years ago

bennypowers commented 7 years ago

Hello! I've got an array like so:

    [
      {
        "name": "9",
        "value": {
          "id": 9,
          "name": "Foo",
          "url": "foo.com",
          "tags":["Blog", "Branding", "eCommerce", "Social Media", "WordPress"]
        }
      },
    {
      "name": "10",
      "value": {
        "id": 10,
        "name": "Bar",
        "url": "bar.com",
        "tags": ["Blog", "eLearning", "Graphic Design", "Social Media", "Responsive", "WordPress"]
      }
    }
  ]

I'd like to filter the array for tags. i.e. Filter by "Blog" or "Branding". I've tried:

<poly-filter
    filter="[[tagFilter]]"
    array-to-filter="[[_toArray(portfolio.projects)]]"
    filtered-array="{{projects}}"
    filter-by="tags"
    filter-max-depth="3"
></poly-filter>

<paper-tabs scrollable selected="{{tagFilter}}" attr-for-selected="name">
  <paper-tab name="">All</paper-tab>
  <template is="dom-repeat" items="[[_toArray(portfolio.tags)]]">
    <paper-tab name="[[item.name]]">[[item.name]]</paper-tab>
  </template>
</paper-tabs>

But this returns an empty array when given a truthy string to filter by. Any pointers appreciated.

vguillou commented 7 years ago

Hi!

I'm pretty sure the problem here is that your tagsproperty is actually contained in a value object for each item. When you set a value in poly-filter's filter-by attribute, it is searching for it only in the first level properties of each item. In your example, it only finds the nameand value properties, and no tags, because it is a second level property. That's why your filtered-array is always empty.

Yeah the filter-by functionality could use a bit more work. You can probably circumvent this by setting in the filter-by an array with both value and tags : ['value', 'tags'].

bennypowers commented 7 years ago

I decided to make my life easier by fixing up my _toArray method and using a separate one on the tags array. now my model is much simpler going in and I can just filter by tags. I'll close because I'm satisfied but I'll bet someone can come up with a use case here ;)

vguillou commented 7 years ago

FYI v1.3.0 now support this, by setting the filter-by attribute to 'value.tags' (or ['value.tags']). The way to circumvent your problem that is suggested in my previous comment does not work starting with v1.3.0.