Question

我正在尝试使用input[type="range"]元素过滤JSON数据。我已达到过滤器工作的程度，但它不能很好地工作。

假设默认的filters对象如下所示：

filters = {
  price: 100,
  rating: 3,
  beds: 1,
  people: 1
}

使用此概念，并更改filters事件input上的值，公寓会严格过滤，并考虑默认值和用户实际想要过滤的值。

apartments = apartments.filter(apartment => {
    if (typeof apartment.price == 'string') {
        apartment.price = apartment.price.replace( /^\D+/g, '');
    }
    if (apartment.price <= (filters.price - 100) ||
        apartment.price >= filters.price) {
            return false;
    }
    if (apartment.rating != filters.rating)
        return false;
    if (apartment.beds != filters.beds)
        return false;
    if (apartment.people != filters.people)
        return false;
    else
        return true;
});

这里的问题是：

如何仅考虑用户更改过滤器的值来更好地过滤？

我尝试简单地删除默认值，但在这种情况下，过滤器永远不会匹配，因为值不存在，并且通过设置默认值，即使用户仅更改，公寓也会严格过滤所有4个值其中之一。

以下是过滤器在我的应用上的显示方式： http://prntscr.com/e6h3oq

这是JSON代表的一间公寓：

{
    "id":1,
    "title":"ultrices posuere cubilia curae",
    "description":"Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst.\n\nMaecenas ut massa quis augue luctus tincidunt. Nulla mollis molestie lorem. Quisque ut erat.",
    "date":"3/9/2016",
    "price":"£200.32",
    "rating":2,
    "address":"7 Harbort Drive",
    "beds":2,
    "people":2,
    "user":{
        "first_name":"Douglas",
        "last_name":"Hansen",
        "email":"dhansen0@skype.com",
        "phone":"66-(363)851-6428"
    }
}

Answer 1

您只需检查过滤器对象中是否设置了属性。如果是undefined，则从过滤器返回true。

我会稍微重构你的代码：

您对床位，人员和评级的检查非常相似，所以我会把它移到像这样的咖喱功能：

const propertyFilter = (propertyName) => {
       return (appartment) => {
           if(filters[propertyName] != undefined) {
               return  filters[propertyName]== apartment[propertyName]);
           }
           return true;
       }
}

您还可以引入函数来处理价格的解析逻辑，并避免将其与过滤代码混合。

const parsePrice = (price) => {
    if (typeof price == 'string') {
            price = price.replace( /^\D+/g, '');
    }
    return price;
}

然后你可以像这样使用它：

apartments
.filter(propertyFilter("people"))
.filter(propertyFilter("beds"))
.filter(propertyFilter("rating"))
.filter(apartment => {
    if(apartment.price != undefined) {
        const price = parsePrice(apartment.price);
        if (price <= (filters.price - 100) || price >= filters.price) {
            return false;
        }
    }
    return true;
})

过滤逻辑过于严格

1 个答案: