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&

どのくらい面白かった?

星を押して送信してね

平均 0 / 5. Vote count: 0

是非フォローしてください

最新の情報をお伝えします

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です