Question

我有一个离子移动应用程序，有一个过滤搜索按钮，但我很难过滤如何过滤对象数组。

假设我有一个像这样构造的对象数组

  initializeItems() {
this.items = [
{Place:"Dumaguete city", date:"February 2 2018"},
{Place:"Sibulan", date:"February 2 2018"},
{Place:"Bacong", date:"February 3 2018"},
{Place:"Manila", date:"February 4 2018"},
{Place:"Netherlands", date:"February 4 2018"},
{Place:"India", date:"February 5 2018"},
{Place:"USA", date:"February 7 2018"}
];

以下过滤代码：

  getItems(ev: any) {
console.log(this.items);
// Reset items back to all of the items
this.initializeItems();

// set val to the value of the searchbar
let val = ev.target.value;

// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
  this.items = this.items.filter((item) => {
    return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
}

}

如何将过滤器功能放在对象数组中？

Answer 1

您需要搜索对象值，而不是数组项

if (val && val.trim() != '') {
  this.items = this.items.filter((item) => {
    return (item.Place.toLowerCase().indexOf(val.toLowerCase()) > -1 ||
    item.date.toLowerCase().indexOf(val.toLowerCase()));
  })
}

Answer 2

项目有几个对象，每个对象有两个成员（地点和日期）。在过滤器中，您必须指定应过滤的成员。在下面的代码中，我选择了Place。

if (val && val.trim() != '') {
  this.items = this.items.filter((item) => {
    return (item.Palce.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
}

您可以选择另一个或两个。

<强>更新

如果您希望过滤器适用于这两个成员，只需使用or运算符添加新条件。

    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
          return (item.Place.toLowerCase().indexOf(val.toLowerCase()) > -1 || item.date.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }

正如您在评论中提到的，您希望将对象的date成员设为timestamp，并且您希望能够过滤它。

嗯，Javascript Date对象有几个构造函数，其中一个构造函数需要timestamp。所以，我们可以用它来解决问题。

  if (val && val.trim() != '') {
          this.items = this.items.filter((item) => {
              return (item.Place.toLowerCase().indexOf(val.toLowerCase()) > -1 || (new Date(Number(item.date))).toString().toLowerCase().indexOf(val.toLowerCase()) > -1);
          })
        }

或

if (val && val.trim() != '') {
    this.items = this.items.filter((item) => {
        const placeResult = item.Place.toLowerCase().indexOf(val.toLowerCase()) > -1;
        const theDate = new Date(Number(item.date));
        const dateResult = theDate.toString().toLowerCase().indexOf(val.toLowerCase()) > -1;
        return placeResult || dateResult;
    })
}

Answer 3

您需要传入要检查的属性/属性，目前您只是测试数组中的对象，该对象将检查对象本身而不是其中的属性。

var items = [
{Place:"Dumaguete city", date:"February 2 2018"},
{Place:"Sibulan", date:"February 2 2018"},
{Place:"Bacong", date:"February 3 2018"},
{Place:"Manila", date:"February 4 2018"},
{Place:"Netherlands", date:"February 4 2018"},
{Place:"India", date:"February 5 2018"},
{Place:"USA", date:"February 7 2018"}
];

var val = 'Manila';

if (val && val.trim() != '') {
  items = items.filter((item) => {
  	if( item.Place.toLowerCase().indexOf(val.toLowerCase()) > -1 ){
      	var node = document.createElement("LI");              
    		var textnode = document.createTextNode(item.Place);        
    		node.appendChild(textnode); 
    		document.getElementById('filter').appendChild(node);
    }
  })
}

如何在对象数组中放置过滤功能

3 个答案: