Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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