forEachの使いかた

Question

実現したいこと

天気予報アプリ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 += `

<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}&#176; C</div> <div class="temp">Min - ${day.main.temp_max}&#176; C</div> </div> ` } })

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以外の方法があるなら教えて頂けないでしょうか。

Comments

[ypp]

showWeatherData関数はどこですか？その引数とコードの場所が間違えていると思います

[moonlight1125]

回答ありがとうございます。以下が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}&#176; C</div>
<div class="temp">Min - ${day.main.temp_max}&#176; C</div>
</div>
`
}
})

weatherforecastEl.innerHTML = otherDayForecast;
}

[yambejp]

「.then(res => res.json())」を「.then(res => res.text())」として

.then(data => {
console.log(data);
で表示されるdataを例示できますか？
データがわからなければ回答がぶれます

[moonlight1125]

{"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
これが出ました

Answer 1

オブジェクトをループさせたいならばfor(obj of objects ){…}でループして
obj.hoge

とやればプロパティを出力できたはずです。

昨今は配列を用いらずにオブジェクトを用いることが多いです。配列というのはいわば何でも放り込める箱なので、基本的にグループを代入するために用います。

対するオブジェクトというのは属性を紐づけるために用います。

Answer 2

もしご提示のデータが正しいとすると

const 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}`;
const main=JSON.parse(json).main;
console.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する意味はありません。