複数のAPIから同時にjsonを取得したい（OpenWeatherMap）

Question

前提・実現したいこと

OpenWeatherMap APIで天気情報を取得する際に、予報データ、過去のデータなど、複数を同時にJSON形式で取得し、データを表示したいです。
取得まではできているのですが、3つのJSONデータの区別ができす、DOM操作の際にデータの指定ができません

該当のソースコード

//         3時間ごとの予測データ
let url1 = "https://api.openweathermap.org/data/2.5/forecast?lat=" + lat + "&lon=" + lon + "&units=metric&appid=" + apiKey;
//         過去5日間の天気
let url2 = "https://api.openweathermap.org/data/2.5/onecall/timemachine?lat=" + lat + "&lon=" + lon + "&dt=" + todayUnix + "&appid=" + apiKey;
//         現在〜1時間ごとの予測
let url3 = "https://api.openweathermap.org/data/2.5/onecall?lat=" + lat + "&lon=" + lon + "&exclude=minutely,daily,alerts&appid=" + apiKey;

let url = [ url1, url2, url3 ];

url.forEach(function(dataUrl){
    fetch(dataUrl, {
        method: "GET",
    })
    .then(response => response.json())
    .then(json => {
        console.log(json["hourly"][0]["temp"]);
    })

試したこと

console.log(json["hourly"][0]["temp"]) にオブジェクトを指定しましたが、url2とurl3に同じオブジェクト名のものがあり、それぞれを区別して表示できません。

3つのJSONデータのうち「このJSONの中のこのデータ」というように指定することは可能でしょうか？

Comments

[Lhankor_Mhy]

dataUrl や response.url で判断するとかではダメですか？

[usk_155]

すみません。知識が浅く、dataUrl , response.url での判断の仕方がわからないので、ご教示いただけないでしょうか？

[Lhankor_Mhy]

dataUrl や response.url には URL が入っているので、それを見ればどのレスポンスか判断できるのでは、と思ったのですが、いかがですか？

Answer 1

こんな感じですか？

    let url = [["forecast", url1], ["timemachine", url2], ["onecall", url3]];

    url.forEach(function ([endpoint, dataUrl]) {
        fetch(dataUrl, {
            method: "GET",
        })
            .then(response => response.json())
            .then(json => {
                console.log(endpoint, json["hourly"][0]["temp"]);
            })
    })

---

コメントを受けて追記

こうですか？

let url = [["forecast", url1], ["timemachine", url2], ["onecall", url3]];

url.forEach(function ([endpoint, dataUrl]) {
    fetch(dataUrl, {
        method: "GET",
    })
        .then(response => response.json())
        .then(json => {
            if (endpoint === "timemachine") console.log(json["hourly"][0]["temp"]);
            if (endpoint === "onecall") console.log(json["hourly"][0]["temp"]);
        })
})

Comments

[usk_155]

ありがとうございます。
それでもうまくいかないようです...。

console.logで、"timemachine"のjson["hourly"][0]["temp"]と、"onecall"のjson["hourly"][0]["temp"]を別々で表示する、といったことをしたいのですが、可能でしょうか？

[Lhankor_Mhy]

「うまくいかない」とは具体的には何が起きていますか？

[Lhankor_Mhy]

もしかして、"forecast"にはその要素がない、とかそういう話ですか？

そうであれば、endpoint で条件文を書いて回避するなど、いろいろやり方はあると思いますが……

[usk_155]

"forecast"には同じ要素はありません。
また、「consoleで表示したものを見分けられるようにしたい」のではなく、「3つのうち特定のJSONの中から、指定したオブジェクトだけを表示したい」です。

console.log(endpoint, json["hourly"][0]["temp"])
で下記が表示されています。
onecall 282.32
Uncaught (in promise) TypeError
timemachine 279.56

[Lhankor_Mhy]

ですから、条件文で処理できると思うんですが……
条件文がイヤってことです？

[Lhankor_Mhy]

わかりにくくて申し訳ないのですが、
console.log() で出力したのは、「consoleで表示したから、それで見分けてね」という意図ではなくて、「このとおり区別できますからいかようにでも処理できますよね？」ということを申し上げたかったのです。

もし、それでご不満があるようでしたら、もう少し具体的に問題点（「条件文の書き方がわかりません」など）を挙げていただけますと回答がしやすいです。

[Lhankor_Mhy]

追記しました。

[usk_155]

ありがとうございます。
async/awaitに書き換えた方が良さそうでしたので、参考にさせていただきます。