URLSearchParamsを使って{ tile: "sample", ids: [1, 2] }みたいなObjectを?title=sample&ids[]=1&ids[]=2みたいな文字列に変換する方法でハマったのでメモ📝

URLSearchParamsを使うといい感じにobjectをURLパラメーターに変換できますが、

developer.mozilla.org

new URLSearchParams({ foo: "1", bar: "2" }).toString()
'foo=1&bar=2'

URLSearchParamsの渡すobjectに配列が含まれていると以下の通り文字列の値しかサポートしていないこともあり、

文字列のキーと文字列の値からなるレコード。なお、ネストには対応していません。 URLSearchParams: URLSearchParams() コンストラクター - Web API | MDN

カンマ区切りの以下のような値が返ってきます。（Chromeで確認)

new URLSearchParams({ foo: "1", bar: [1, 2] }).toString()
'foo=1&bar=1%2C2'

しかしRuby on Rails等で配列で渡したいときにはkey[]=valueの形式にしたいケースもあるかと思います。そのような場合には以下のようにobjectをforEachで回してArrayの場合にはkey[], valueの形式でappendしてtoString()で文字列を取得するとfoo=1&bar[]=1&bar[]=2'のような形式に変換することができました。

export const objectToUrlSearch = (object: object) => {
  const searchParams = new URLSearchParams();
  Object.entries(object).forEach(([key, value]) => {
    if (Array.isArray(value)) {
      value.forEach((v) => searchParams.append(`${key}[]`, String(v)));
    } else {
      searchParams.append(key, String(value));
    }
  });
  return searchParams.toString();
};

余談ですが、そもそもkey[], value形式はRFCとかに記載されているような仕様じゃないんですね 👀

shinkufencer.hateblo.jp