スナックelve 本店

バツイチ40代女の日記です

URLSearchParamsでURLパラメーター楽に作れないじゃーん(´;ω;`)

なんかほら、urlに?ほげほげ=ほにゃらら&ほげ=ほにゃ~ とか付いてるじゃないですかぁ。あれがパラメーターなんですけどぉ~楽に生成する方法を探していてぇ~
URLSearchParams使うといいよって記事見つけたんですよぉ。
zenn.dev

すっご~!簡単そ~!! って思うじゃないですかぁ?
なんかしらねぇけどうまくいかねぇっす(´;ω;`)
多分値のない項目も出力しちゃうからだと思うんだけど・・・。apiによってはそのまま行けると思う。
ためにしにJSONにしてから処理してみたら悪化したw

  console.log("===START===");
  //jsonっぽくパラメータ保存したい
  let prm_json = {
    applicationId: '1029880527351169328',
    affiliateId: '05eff714.c5ceaa1a.05eff716.192055f2',
    genreId: document.getElementById('genre').options[document.getElementById('genre').selectedIndex].value,
    formatVersion: 2,
    keyword: encodeURI(document.getElementById('keyword').value),
    hits: 10,
    page: page,
    sort: encodeURI('-itemPrice'),
    maxPrice: document.getElementById('maxPrice').value
  };
  //そのまま変換
  const testpara1 = new URLSearchParams(prm_json).toString();
  let url = "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?" + testpara1;
  console.log(url);//テスト1

  //JSONにして変換
  let urlParaJson = JSON.stringify(prm_json);
  const testpara2 = new URLSearchParams(urlParaJson).toString();
  url = "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?" + testpara2;
  console.log(url);//テスト2


  //あきらめろん
  let para="";
  Object.keys(prm_json).forEach(function (key) {
    if(key && prm_json[key]){
      para = para + key + "=" + prm_json[key] + "&";
    }
  });
  url = "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?" + para;
  console.log(url);//これなら行ける

テスト1
https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?applicationId=1029880527351169328&affiliateId=05eff714.c5ceaa1a.05eff716.192055f2&genreId=&formatVersion=2&keyword=T%25E3%2582%25B7%25E3%2583%25A3%25E3%2583%2584&hits=10&page=&sort=-itemPrice&maxPrice=
スト2 ばけらった
https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?%7B%22applicationId%22%3A%221029880527351169328%22%2C%22affiliateId%22%3A%2205eff714.c5ceaa1a.05eff716.192055f2%22%2C%22genreId%22%3A%22%22%2C%22formatVersion%22%3A2%2C%22keyword%22%3A%22T%E3%82%B7%E3%83%A3%E3%83%84%22%2C%22hits%22%3A10%2C%22page%22%3A%22%22%2C%22sort%22%3A%22-itemPrice%22%2C%22maxPrice%22%3A%22%22%7D=
テスト3 取得できた
https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?applicationId=1029880527351169328&affiliateId=05eff714.c5ceaa1a.05eff716.192055f2&formatVersion=2&keyword=T%E3%82%B7%E3%83%A3%E3%83%84&hits=10&sort=-itemPrice&