2017-02-09 1 views
1

Я пытаюсь фильтровать данные JSON, используя элемент input[type="range"]. Я достиг точки, где работает фильтр, но он не работает отлично.Слишком строгая логика фильтрации

Предположим, по умолчанию 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":"[email protected]", 
     "phone":"66-(363)851-6428" 
    } 
} 

ответ

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; 
}) 
Смежные вопросы