Q&A
showWeatherData関数はどこですか？その引数とコードの場所が間違えていると思います
実現したいこと
天気予報アプリforEachを使用したときに発生するエラーを解決して最高気温と最低気温を予測したい
前提
https://www.youtube.com/watch?v=6trGQWzg2AI&t=3689s
この動画を見て作っています。1:01:38 頃が該当するプログラムです。
また、動画主の方法ではAPI取得ができなくなっていたのでchatGPTに聞いたやり方でAPIを取得しています。説明が雑なので、分からないないことがあったら教えてください。
発生している問題・エラーメッセージ
p.js:52 TypeError: data.forEach is not a function
at showWeatherData (app.js:95:6)
at app.js:50:13
該当のソースコード
API取得
const API_KEY = 'ここに自分のAPIkeyがあります';
function getWeatherData() {
navigator.geolocation.getCurrentPosition((success) => {
let {latitude,longitude} = success.coords;
fetch(https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&exclude=hourly,minutely&appid=${API_KEY}&units=metric)
.then(res => res.json())
.then(data => {
console.log(data);
showWeatherData(data);
})
.catch(error => console.error(error));
}, (error) => {
console.error(error);
});
}
getWeatherData();
ここで最低気温と最高気温を取得します
let otherDayForecast = ''
//このmainが配列じゃないのでforEachが使えないです。
data.main.forEach((day,idx) => {
if(idx == 0){
}else{
otherDayForecast += `
weatherforecastEl.innerHTML = otherDayForecast;
ソースコード
試したこと
エラー文の意味を調べました。forEachは.の前が配列じゃないと使えないとのことでした。他の方法での実行を検討しましたが、初心者なのでなかなかコードが書けませんでした。
Object
base
:
"stations"
clouds
:
{all: 0}
cod
:
200
coord
:
{lon: 139.6503, lat: 35.6762}
dt
:
1681989511
id
:
1862143
main
:
feels_like
:
21.29
humidity
:
70
pressure
:
1006
temp
:
21.28
temp_max
:
22.03
temp_min
:
19.9
[[Prototype]]
:
Object
name
:
"Horinouchi"
sys
:
{type: 2, id: 2001249, country: 'JP', sunrise: 1681934587, sunset: 1681982245}
timezone
:
32400
visibility
:
10000
weather
:
[{…}]
wind
:
{speed: 7.72, deg: 190}
[[Prototype]]
:
Object
見づらくてすいません。この中のmainの中の項目を取得したいのですが、配列じゃないので取得できません。
補足情報（FW/ツールのバージョンなど）
forEach以外の方法があるなら教えて頂けないでしょうか。
回答ありがとうございます。以下がshowWeatherData関数です
function showWeatherData(data){
let {humidity,pressure,}=data.main;
let wind_speed = data.wind.speed;
let {sunrise,sunset} = data.sys;
currentWwatherItmlEl.innerHTML =
`<div class="weather-item">
<div>pressure</div>
<div >${pressure}</div>
</div>
<div class="weather-item">
<div>Humidity</div>
<div>${humidity}</div>
</div>
<div class="weather-item">
<div>Wind Speed</div>
<div>${wind_speed}</div>
</div>
<div class="weather-item">
<div>Sunrise</div>
<div>${moment(sunrise *1000).format('HH:mm a')}</div>
</div>
<div class="weather-item">
<div>Sunset</div>
<div>${moment(sunset *1000).format('HH:mm a')}</div>
</div>`;
let otherDayForecast = ''
data.forEach((day,idx) => {
if(idx == 0){
}else{
otherDayForecast += `
<div class="weather-forecast-item">
<div class="day">${moment(day.dt *1000).format('ddd')}</div>
<img src="http://openweathermap.org/img/wn/${day.weather[0].icon}@2x.png" alt="weather icon" class="w-icon">
<div class="temp">Max - ${day.main.temp_min}° C</div>
<div class="temp">Min - ${day.main.temp_max}° C</div>
</div>
`
}
})
weatherforecastEl.innerHTML = otherDayForecast;
}
「.then(res => res.json())」を「.then(res => res.text())」として
.then(data => {
console.log(data);
で表示されるdataを例示できますか？
データがわからなければ回答がぶれます
{"coord":{"lon":139.9532,"lat":35.3843},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"base":"stations","main":{"temp":22.52,"feels_like":23.1,"temp_min":21.87,"temp_max":24.32,"pressure":1003,"humidity":87,"sea_level":1003,"grnd_level":1000},"visibility":10000,"wind":{"speed":2.89,"deg":209,"gust":4.24},"clouds":{"all":100},"dt":1682065865,"sys":{"type":1,"id":8074,"country":"JP","sunrise":1682020863,"sunset":1682068600},"timezone":32400,"id":1859393,"name":"住んでる場所","cod":200}
ap
これが出ました
回答2件
0
オブジェクトをループさせたいならばfor(obj of objects ){…}でループして
obj.hoge
とやればプロパティを出力できたはずです。
昨今は配列を用いらずにオブジェクトを用いることが多いです。配列というのはいわば何でも放り込める箱なので、基本的にグループを代入するために用います。
対するオブジェクトというのは属性を紐づけるために用います。
投稿2023/04/21 00:32
総合スコア3640
0
もしご提示のデータが正しいとすると
javascript
1const json=`{"coord":{"lon":139.9532,"lat":35.3843},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"base":"stations","main":{"temp":22.52,"feels_like":23.1,"temp_min":21.87,"temp_max":24.32,"pressure":1003,"humidity":87,"sea_level":1003,"grnd_level":1000},"visibility":10000,"wind":{"speed":2.89,"deg":209,"gust":4.24},"clouds":{"all":100},"dt":1682065865,"sys":{"type":1,"id":8074,"country":"JP","sunrise":1682020863,"sunset":1682068600},"timezone":32400,"id":1859393,"name":"住んでる場所","cod":200}`; 2const main=JSON.parse(json).main; 3console.log(JSON.stringify(main));
mainの値は、「 {"temp":22.52,"feels_like":23.1,"temp_min":21.87,"temp_max":24.32,"pressure":1003,"humidity":87,"sea_level":1003,"grnd_level":1000}」
になりますので、これをforEachする意味はありません。
投稿2023/04/21 08:44
総合スコア114843
あなたの回答
tips
プレビュー
