如何过滤聚合物中的重组数据(重复)

时间:2018-07-27 16:44:17

标签: arrays filter polymer polymer-2.x dom-repeat

我正在尝试过滤正在动态重新索引的数组。

我想要一个与多个属性上的字符串匹配的输入字段。

<paper-input value="{{val}}" placeholder="Filter Cards"></paper-input>

<template is="dom-repeat" items="[[restructure(data)]]" initial-count="2" filter="{{filter(val, data)}}">
  <card-items data="[[item]]" items="[[item.items]]" links="false"></card-items>
</template>

...

此功能将重组要格式化的数据以用于卡布局。

returnInvoices(data) {
  let newData = [];
  for (let i = 0; i < data.length; i++) {
    let noOrder = data[i].noOrder;
    if (!newData[noOrder]) {
      newData[noOrder] = {
        idMaster: data[i].idMaster,
        itemId: data[i].itemId,
        description: data[i].description,
        noOrder: noOrder,
        items: []
      };
    }
    newData[noOrder].items.push('{' +
      '"idMaster":"' + data[i].idMaster + '",' +
      '"itemId":"' + data[i].itemId + '"}');
  }
  return newData.filter(val => val).sort((a, b) => {return b.noInvoice - a.noInvoice}) // reindex array
}

我希望此函数返回数组中具有与字符串匹配的属性的对象。

filter(val, data) {
  if (!val) return null;
    else {
      val = val.toLowerCase();
      // not sure what to do here
      // would like to filter on all object properties (from data)
    return data[0];
  }
}

...

示例

if(val == 1) return data[0] & data[1];

if(val == 'Item') return data[0] & data[2];

用于数据数组

let data = [
  {"itemId": "1", "description": "Nice Item", "noOrder": 123},
  {"itemId": "2", "description": "Good Product", "noOrder": 123},
  {"itemId": "3", "description": "Fine Item", "noOrder": 444}
}

...

如何过滤所有3个属性上的字符串?

如何使用过滤器作为重组的中间功能?

1 个答案:

答案 0 :(得分:1)

dom-repeat filter property的文档包含以下语句:

  

该函数应该与传递给Array.filter的sort函数匹配。使用过滤器功能对基础项数组没有影响。

Array.filter为documented

  

函数是谓词,用于测试数组的每个元素。返回true保留元素,否则返回false。

因此,如果任何属性与输入匹配,则从过滤器函数中返回true,否则返回false,类似

filter(item) {
  let val = this.val;
  // if the filter is empty show everything
  if (!val) return true;
  // otherwise see is there a match
  val = val.toLowerCase();
  return // for the "description" use "contains" logic
         (item.description.toLowerCase().includes(val)) ||
         // for the "noOrder" use "starting" logic
         (item.noOrder.toString().indexOf(val) == 0)
       // add matching conditions here ...
}

现在要触发过滤,您必须观察触发过滤的属性,即html就像

<paper-input value="{{val}}" placeholder="Filter Cards"></paper-input>

<template is="dom-repeat" filter="[[filter]]" observe="val" items="[[restructure(data)]]" initial-count="2">
  <card-items data="[[item]]" items="[[item.items]]" links="false"></card-items>
</template>

顺便说一句,为什么您将项目作为字符串推送到newData中?为什么不作为对象,即

newData[noOrder].items.push({
  idMaster: data[i].idMaster,
  itemId: data[i].itemId
});

我认为您可能会失去newData.filter(val => val)步骤...