【Javascript JQuery】一部の検索条件のパラメータを配列でない形で渡したい

Question

前提

多数の検索条件を持つ検索機能を作成しています。
現状では全ての検索条件をページ上のチェックボックス等で実装しているところ、
一部の検索条件についてはその項目が選択された際に検索内容物をモーダル画面に表示し、
そのモーダル画面内の検索ボタン押下で検索できる機能に変更したいと考えています。

（例）
現状、「都道府県」「市町村」の検索機能は、ページ上のドロップダウン内にチェックボックスを設ける形としています。
新機能では、「都道府県」をクリックした際に都道府県一覧のモーダルを表示させ、
チェックされた都道府県に応じて別タブで当該都道府県の市区町村をjsで動的に表示させる予定です。

実現したいこと

モーダルを表示させた際、そしてモーダル内の検索ボタンを押下した際に、それまでの検索条件を全て引き継ぐことが最終的に実現したいことです。

ただ現状、検索条件によって、配列で渡しているキーとそうでないキーが混在しています。
上記の例では、都道府県と市区町村は配列で渡しているため、以下のコードで難なく取得できているのですが、
他のキーの値も配列で取得する形となってしまいます。

元々、サイト上で配列で渡していないキーについて、配列でない形で渡すにはどのように書き換えればよいでしょうか。
わかりにくい点がございましたら、何でもお尋ねください。
よろしくお願いいたします。

発生している問題・エラーメッセージ

http://localhost:3000/index?prefecture%5B%5D=1&prefecture%5B%5D=3&hogekey=FUGA&city%5B%5D=202&city%5B%5D=165

上記のURLのページからモーダルを表示させ、下記のJSの挙動を通じて再度検索すると、

http://localhost:3000/index？prefecture%5B%5D=1&prefecture%5B%5D=3&hogekey%5B%5D=FUGA&city%5B%5D=202&city%5B%5D=165

となってしまう（hogekeyについてはhogekey=FUGAのままにしたい）

該当のソースコード

//上記のようなURLからパラメータを取得
  var paramsString = location.search;
  var searchParams = new URLSearchParams(paramsString);
  var paramsPrefecture = searchParams.getAll("prefecture[]");
  var paramsCity = searchParams.getAll("city[]");
  var paramsHoge = searchParams.getAll("hogekey");

//パラメータを定義
  var reqParams = {
    prefecture: [],
    city: [],
    hogekey: paramsHoge //ここが問題
  }

//取得したパラメータを元に、表示したモーダル内の都道府県をあらかじめチェックし、パラメータに追加
  $(paramsPrefecture).each(function(index, val){
    $(`input.prefecture[value=${val}]`).each(function() {
      $(this).prop("checked", true);
    });
  });
 
　var ids = [];
    $('input.prefecture').each(function() {
      if (this.checked) {
        ids.push($(this).attr("value"));
      }
    });
 reqParams.prefecture = ids;

//検索ボタン押下時
  $('.search-button').click(function () {
    var query = $.param({
      prefecture: reqParams.prefecture,
      city: reqParams.city,
      hogekey: reqParams.hogekey
    });
    location.href = "/index?" + query;
  });

Answer 1

getAllの戻り値が配列型であるためではないかと思います。
getで良いのではないでしょうか。

var paramsHoge = searchParams.get("hogekey");

Answer 2

こうでは？

//  var paramsHoge = searchParams.getAll("hogekey");
//                                  ↓
    var paramsHoge = searchParams.get("hogekey");

【URLSearchParams - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams

Comments

[kotahayashi]

ご回答ありがとうございます。解決しました。
ライブラリやAPIに当たるようにします。