JSでJSONを動的にフィルタしたい

Question

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で気をつけることがあれば教えてください。

該当のソースコード

//条件文の文字列の生成コード 絞り込み条件に応じて条件文を構築(関数詳細省略)

let condition = getConditionText(); 

//生成された文字列
console.log(condition);
// "item.delv > 0 && item.isSale == true && item.isUsed == true"

//フィルタ
let filteredProducts =  products.filter(item => eval(condition));

よろしくお願いいたします。

Comments

[Lhankor_Mhy]

目的をお伺いした方がいい案件のように思いました。

・外部入力が挿入される形で条件式文字列を生成するなら、論外です。
・メンテナンスをしやすくするため、ならば、直接ソースコードを触った方がいいでしょう。
・サーバが条件式文字列を生成する、ということであれば、外部JSにして読み込んだ方が無難でしょう。

[Pltcpx]

ありがとうございます。
Vue.jsの練習で作っていました。
絞り込みのためのチェックボックスのチェックの変動で条件文を変更したかったです。チェックボックスが増えるたびに、ベタな条件をふやすのはどうかと思い動的に条件をつくることを意図しています。

[Lhankor_Mhy]

補足ありがとうございます。
質問に追記された方が、目的に合う回答がつきやすそうな気がします。

[Pltcpx]

追記しました。ありがとうございます。

Answer 1

コールバック関数を用意するだけでは？

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},
];

const callback=item=>item.delv > 0 && item.isSale == true && item.isUsed == true;
products=products.filter(item=>callback(item));
console.log(products);

Comments

[yambejp]

evalは技術的にいきづまったときの最後の手段なので
この程度の処理に適用するのはやめたほうがいい

[Pltcpx]

ありがとうございます。evalはいかがなものかと思って質問しました。
画面側でリストの絞り込みチェックボックスがいくつもあって、そのチェック状況でフィルタ条件を動的に変更するのを意図していましたので、ベタ書きしない方法を探しています。

[yambejp]

コールバックを複数用意して配列に入れておくか、switchで振り分ければよいかと

[Pltcpx]

なるほど、まとめかたの参考になりました。ありがとうございます。

[Pltcpx]

あー、AND条件なので、配列にいれて複数回該当するフィルタを実行すればいいってことですかね・・・。それで試してみますねー。

Answer 2

質問主です。以下でいただいたコメントを参考にこうしました。
AND条件なので、配列に条件コールバックをいれてfor文で回して複数回filterかけるようにしました。

//チェックボックスに対応する個々のCallbackを作っておき、
//条件に応じて、条件文コールバックの配列詰め合わせを作成

let callbacksArray = getCallbacks();

//中身
//[item => item.isSale == true, item => item.delv == 0, item => item.isUsed == true]

//コールバック詰め合わせぶんだけループしてフィルタ
let newList = this.products;
				
for (let i = 0; i < callbacksArray.length; i++) {
			
  newList = newList.filter(item => callbacksArray[i](item));
}
				

ありがとうございました。