$getJSONをJavaScriptのみで実装する方法を教えてください。

Question

APIからJsonのデータを取ってきたのですが、これをfetchAPIで実装する方法を教えてください

function getRest(lat,lng) {
  var url = "---apiurl---";
  var params = {
    keyid: "--key--",
    format: "json",
    latitude: lat,
    longitude: lng,
    range: 3
    }
   $.getJSON( url, params, function( result ) {
     showResult( result );
  });
}

$getJSONの部分を

fetch(url).then(function(response) {
  return response.json();
}).then(function(json) {
  showResult( json );
});

に変えてみたのですが、Failed to fetchのエラーが出てしまいます。

Answer 1

// 未検証
const url = new URL( 'https://api.gnavi.co.jp/RestSearchAPI/v3/' );
url.searchParams.append( 'keyid', '04f83255d20d254d2fc828a440dd0777' );
url.searchParams.append( 'latitude', lat );
url.searchParams.append( 'longitude', lng );
url.searchParams.append( 'range', 3 );
fetch( url.href ).then( response=> response.json() ).then( showResult );

【URLクラスとURLSearchParamsクラスの使い方メモ - Qiita】
https://qiita.com/ovrmrw/items/1c1564481c4ca9cc4351

【URL | MDN】
https://developer.mozilla.org/ja/docs/Web/API/URL

【URLSearchParams | MDN】
https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams

Comments

[退会済みユーザー]

こういう書き方があるんですね。
回答ありがとうございます。

Answer 2

GASでの実装例を参考に

var url = "https://api.gnavi.co.jp/RestSearchAPI/v3/?";
var keyid = "04f83255d20d254d2fc828a440dd0777";
var latitude = lat;
var longitude = lng;
var range = 3;

url = `${url}keyid=${keyid}&latitude=${lat}&longitude=${lng}`;
console.log(url);
fetch(url).then(function(response) {
  return response.json();
}).then(function(json) {
  showResult(json)
  });

でなんとか動くようにはなりました。
かなりのゴリ押しプログラムなので、もっと綺麗に書く方法を知りたいです。