3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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

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"
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
3
Help us understand the problem. What are the problem?