apiからデータを取得できません

Question

ブラウザのナビゲータ機能を使用してローカルの温度を表示するWebサイトを作成して、座標を取得したいと考えていますが、気象APIを呼び出すと表示されません任意のデータ。私が使用されるAPIはこの1つである：https://jsfiddle.net/9cLkjg5e/

Answer 1

ないあなたはauthors.mapビットをどうしようとしているが、それは必要ではないかわから：https://fcc-weather-api.glitch.me/

var la; 
var lg; 

function getLocation() { 
if (navigator.geolocation) 
    navigator.geolocation.getCurrentPosition(showPosition); 
} 

function showPosition(position) { 
la= position.coords.latitude; 
lg= position.coords.longitude; 
} 

getLocation(); 

var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg; 
fetch(url) 
.then((resp) => resp.json()) 
.then(function(data) { 
    let api = data.main; 
    return authors.map(function(api) { 
    document.getElementById("temper").innerHTML=api.temp; 
    }) 
}) 

ここjsfiddleです。フェッチによって返されるデータオブジェクトの温度はdata.main.tempです。

だから、基本的にこれに変更すると

document.getElementById("temper").innerHTML = api.temp; 

固定jsのコードを修正します：追記オン

var la; 
 
var lg; 
 
function getLocation() { 
 
    if (navigator.geolocation) 
 
    navigator.geolocation.getCurrentPosition(showPosition); 
 
    
 
} 
 
function showPosition(position) { 
 
    la= position.coords.latitude; 
 
    lg= position.coords.longitude; 
 
    //document.getElementById("temper").innerHTML="Latitude:" + la; 
 
// document.getElementById("icon").innerHTML="Longitude:" + lg; 
 
} 
 
getLocation(); 
 

 
var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg; 
 
fetch(url) 
 
    .then((resp) => resp.json()) 
 
    .then(function(data) { 
 
    let api = data.main; 
 
    document.getElementById("temper").innerHTML = api.temp; 
 
    }) 
 
    .catch(function(error) { 
 
    console.log("error: " + error); 
 
    });

<div class="container"> 
 
    <center><h1 id="header">Weather App</h1></center> 
 
</div> 
 

 
<div class="container"> 
 
    <p id="temper"></p> 
 
</div>

Answer 2

は、ラとLGの変数がで充填されていませんAPIコールの時刻。これを解決するには、getCurrentPosition（）の成功コールバックでAPI呼び出しを行います。