2017-07-16 22 views

答えて

2

ないあなたは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>

+0

ありがとうございました。 'authors.map'は' api.map'だったはずです。私はそれを変更するのを忘れました。 – Daniel

+0

@Danielこの場合、データは配列ではなくオブジェクトなので、 'map'関数は必要ありません。 – H77

+0

ええ、私はそれを持っています。それは今働きます、ありがとう! – Daniel

0

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

関連する問題