Help us understand the problem. What is going on with this article?

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした