javascriptで条件検索

Question

nuxt.js/vuexという環境です。
ページ遷移したときにクエリーを投げて、そのクエリーを引数にvuexのgettersでデータをソートするという処理を書いています。

調べれると様々な方法があり何が正しいのか混乱しています。

ここに仮のデータを用意します。

menus = [
	{name:'ハンバーグ', genre:'洋食', price:'1000'},
	{name:'麻婆豆腐', genre:'中華', price:'800'},
	{name:'肉じゃが', genre:'和食', price:'900',}
]

投げられるクエリーはどんなクエリーか分らないし、ない場合もある
例１）?genre=&price=1000
例２）?genre=洋食
例３）?take_out=OK

方法論として考えたのは

１，
投げられてきたクエリーがNULLのやつを除く（NULLじゃないものを新しいオブジェクトに格納する）

２，
findメソッドを使用して
新しく作ったオブジェクトのキーが、仮データのキーに存在していた場合フィルタリング
なかった場合は何もしない

３、
フィルターは以下の方法でループしていけば、最終的に欲しいデータが取れるのではないかと思いました。
１回目：新しい配列を作って、フィルターしたデータを入れる
２～？回目：先ほどの配列を使ってフィルターする
最後：リターンする

しかし、そもそもクエリーがNULLかどうかを判定するところで詰んでしまっています。

      var existsQueryArray = []
      for (const value of Object.entries(query)) {
        if(value !== null){
          existsQueryArray.push()
        }
      }

これをfor文で書いたらいいのかforEachで書いた方が良いのかすら分かりません。。

何をどうしていいのか分からなくなってきましたので質問してみました。
何かヒントを頂けますでしょうか。よろしくお願い致します。

Answer 1

1. Queryをパースしkey-valueに変換
2. null(undefined)や空文字条件をfilter
3. すべての条件に当てはまるものだけをfilter

というフローで良いです。
型情報も入れたいのでTSになりますがサンプルコードは下の感じです。実装部分は一部割愛しているので自分で実装してみてください。(型情報だけ消せばJSでも動作するコードです。)

interface Condition{
  key: string,
  value: string
}

function parseQuery(query: string): Condition[] { 
  //?genre=&price=1000 => [ ["genre",""], ["price","1000"]]
  // に変換して返す
  return [ { key: "genre", value: ""}, ...]
}
function isMatchToAllConditions(data, conditions: Condition[]) {
  return conditions.every(c => data[c.key] == c.value)
}

const conditions = parseQuery(query)
  .filter( q => q.value && q.key) //Nullで無いものだけ残す

const menues = [...] // データ取得

const searched = menues.filter(menu => {
  return isMatchToAllConditions(menu, conditions)
})

Comments

[tktail]

ご指南頂きありがとうございます。

export const getters = {
getFilteringList: (state) => (query) => {

// queryの形式を[{key:'',value:''}...]に変換する
let conversion = Object.entries(query).map(([key, value]) => ({'key': key, 'value': value}))
// 条件に合致したデータを返す関数を定義
function isMatchToAllConditions(data, conditions){
return conditions.every(c => data[c.key] == c.value)
}
// null以外の要素を取り出す
const conditions = conversion.filter(q => q.value && q.key)
// フィルターをかける
const searched = state.data.filter(list => {
return isMatchToAllConditions(list, conditions)
})
// 出力
return searched
}
}

頂いたサンプルコードを参考にし、以上のようなコードで解決することが出来ました。
自分の中でも何度もフィルターをかけるのって変だなと思いつつ、AND演算子やOR演算子で実装できそうな気もしないしヤキモキしていました。
まだまだ課題は山積みなのですが、おかげさまで３日悩んだことが晴れました。
この度はありがとうございました。
またご縁がありましたら、是非宜しくお願い致しますm(_ _)m