JSでJSONを動的にフィルタしたい
let products = [ {name:"iphone11Pro", price:100000, delv:0, isSale:false, isUsed: false}, {name:"iphone11", price:90000, delv:0, isSale:false, isUsed: false}, {name:"iphoneXS", price:80000, delv:0, isSale:false, isUsed: false}, {name:"iphoneXR", price:80000, delv:0, isSale:true, isUsed: false}, {name:"iphone8", price:70000, delv:500, isSale:true, isUsed: false}, {name:"iphone7", price:60000, delv:500, isSale:true, isUsed: true}, {name:"iphoneSE", price:50000, delv:0, isSale:true, isUsed: true}, ]
上記のようなJSONがあり、Objectのkeyは今後も増え、絞り込み条件(かつ)も増えるので、動的に絞り込み条件を生成し、フィルタしたいと思っています。
Vue.jsで画面側をJSONに連動して変更しようと思っており、「商品リスト」と「チェックボックスによる絞り込み機能」を考えています。
画面側に「セール品絞り込みチェックボックス」「中古品絞り込みチェックボックス」などがあり、今後も「〜〜絞り込みチェックボックス」(と対応するkey)が増えることを想定しています。
なので、ベタにアンド条件を書きたくないと思い、動的に絞り込み条件をつくってフィルタする機能を作りたいです。
なので、下記ソースコードのように
- 文字列で条件文を生成
- eval(またはFunction)につっこんでfilter関数で実行
しようと思っているのですが、動的な条件によるJSONの絞り込みでもっとスマートな方法があれば教えてくださいませんでしょうか。
この方法でもいい場合、こういったケースでevalで気をつけることがあれば教えてください。
該当のソースコード
JavaScript
1 2//条件文の文字列の生成コード 絞り込み条件に応じて条件文を構築(関数詳細省略) 3 4let condition = getConditionText(); 5 6//生成された文字列 7console.log(condition); 8// "item.delv > 0 && item.isSale == true && item.isUsed == true" 9 10//フィルタ 11let filteredProducts = products.filter(item => eval(condition)); 12
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー