LoginSignup
7
4

More than 3 years have passed since last update.

URLSearchParamsで配列の検索パラメータを取り扱う

Posted at

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=donestatusesのように同じ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"
7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4