2017-02-09 6 views
1

input[type="range"]要素を使用してJSONデータをフィルタリングしようとしています。私はフィルタが動作する点に達しましたが、完全には動作しません。フィルタリングロジックが厳しい

デフォルトfiltersオブジェクトは次のようになりますと仮定します。この概念を使用して、そしてアパートメントは非常に厳密にフィルタを取得filtersinput上のイベントの値を変更し、対価のデフォルト値と値を考慮して

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

ユーザーは実際にフィルタリングしたいと思っていました。

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; 
}); 

ここで質問です:

どのように私は唯一のアカウントにユーザーが変更され、フィルタの値を取ることによって、より良いフィルタを作ることができますか?

私は単にデフォルト値を削除しようとしましたが、値が存在しないためフィルタに一致することはありません。デフォルト値を設定することで、アパートはユーザーがそれらの1つを変更しました。ここで

はフィルタが私のアプリ上でどのように見えるかです: http://prntscr.com/e6h3oq

これはJSONで表現1つのアパートです:

{ 
    "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; 
}) 
関連する問題