APIの値を取得する方法についての質問です

配列の値を取得する方法についての質問です。
前後１週間の天気を表示するものを、Vueでつくっているのですが、画像のように、同じ日にちの天気がたくさん並んでしまいます。
【APIから渡ってくる値】から、一番上の１つだけを infos[] にいれるにはどうしたら良いでしょうか？
URLの中には、同じ日の違う時間のデータが [ { data1 }, { data2 }, { data3 } ] 　の形式で入っています。
{data1}の値だけを指定して、その中の日付や最高気温などを dataに定義した infos[] に入れたいです。

【APIから渡ってくる値】
https://www.metaweather.com/api/location/1117817/2021/2/17/

値から１つだけをinfoにいれるために試したこと
・response.data[0]　→　TypeError: response.data[0].map is not a function
・response[0].data　→　TypeError: Cannot read property ‘data’

Vue
1axios
2        .get(getDataUrl)      //getDataUrlはURLが前後一週間の13通り入った配列です
3        .then(
4          function (response) {
5            this.infos = response.data.map((weather) => {
6              return {
7                date: weather.applicable_date,  //日付
8                max_temp: weather.max_temp,  //最高気温
9                wind: weather.wind_direction_compass, //風向き
10                weather_state: weather.weather_state_name, //天候
11                image_url:
12                  "https://www.metaweather.com/static/img/weather/ico/" +
13                  weather.weather_state_abbr +
14                  ".ico", //天気画像
15              };
16            });
17

行動規範の内容に同意します

回答1件

ベストアンサー

response.dataから一番最初の要素だけを取り出せばよいのではないでしょうか。

axios
    .get(getDataUrl)
    .then(
        function (response) {
            weather = response.data[0];
            this.infos = [{
                date: weather.applicable_date,  //日付
                max_temp: weather.max_temp,  //最高気温
                wind: weather.wind_direction_compass, //風向き
                weather_state: weather.weather_state_name, //天候
                image_url:
                    "https://www.metaweather.com/static/img/weather/ico/" +
                    weather.weather_state_abbr +
                    ".ico", //天気画像
            }];
        });

投稿2021/02/12 01:59