URLSearchParams
とは?
URLSearchParams
は、検索条件を指定する際に使用されるURL?
以降の文字列を取り扱う際に、様々な便利機能を提供してくれるAPIです。
const params = new URLSearchParams('?type=test&status=done');
console.log(Object.fromEntries(params));
// => {type: "test", status: "done"}
検索パラメータとして配列を指定したい場合はどうするのか
?type=test&statuses=process&statuses=done
のstatuses
のように同じkeyに複数の値を含めて、OR検索を行いたい場合があると思います。
この場合は以下のようにパラメータを取得すると良いでしょう。
// ステータスは配列で取得したい
const isArrayField = (key: string) => key === 'statuses';
const params = new URLSearchParams('?type=test&statuses=process&statuses=done');
const keys = Array.from(new Set(searchParams.keys()));
let q: { type?: string, statuses?: string[] } = {}
for (const key of keys) {
const values = params.getAll(key);
if (values.length <= 0) {
continue;
}
q = {
...q,
[key]: isArrayKey(key) ? values : values[0]
};
}
console.log(q);
// => {type: "test", statuses: ["process", "done"]}
searchParams.keys()
は上記の例の場合["type", "statuses", "statuses"]
となっているので、Set
を使って重複を弾いたあと、Array.from
で再び配列に戻しています。
(コンパイルオプションの--downlevelIteration
フラグをtrue
に設定すれば、配列に戻す必要はありません)
getAll
関数はstatuses
に設定されている値の全てが配列で返してくれるので、配列で取得したいフィールドの場合は配列をそのまま格納すればOKです。
ちなみに、get
関数もありますが、この関数は最初の1個目の値をstring型で返します。
console.log(params.get('statuses'));
// => "process"