Vueとaxiosを使用したAPIデータの取得

Question

初心者で恐れ入りますが、下記のコードにて2つのAPIから異なるデータを表示したいと思います。if　日本のデータは問題なく取得できましたが、elseの世界のデータのAPIは表示されません。表示するためにはどのようなコード修正が必要になりますでしょうか。

HTML

<div id="app">　
世界 {{ world.cases }}
日本 {{ japanInfo.cases }}
</div>

js

var app = new Vue({
  el: '#app',
  data: {
    countryInfoList: [],
    world: null,
    japanInfo: null,
  },

  mounted () {
    this.initCountryInfo();
  },
  methods:{
      initCountryInfo: function() {

        const chartApis = [
          // WORLD
          {
            api:'https://disease.sh/v3/covid-19/all?yesterday=true'
          },
          // JAPAN
          {
            api:'https://disease.sh/v3/covid-19/countries/JPN?yesterday=true'
          },
        ];

                chartApis.forEach((element) => {
                  axios
                  .get(`${element.api}`)
                  .then(response => {
                      if (response.data.countryInfo.iso3 === 'JPN') {
                        this.japanInfo = response.data;
                      }
                      else{
                        this.world = response.data;
                    }

                  })
                });
              },
            }
        })

Comments

[plasticgrammer]

javascriptエラーになってませんか？
世界の場合、countryInfoが undefined なのでは？

[suusui]

ご返信ありがとうございます。エラーは下記の用に表示されております。
Uncaught (in promise) TypeError: Cannot read property 'iso3' of undefined
無知で申し訳ございません、どのような修正が必要でしょうか。

Answer 1

if (response.data.country) {

で、どうでしょうか？
本当はレスポンスの内容で処理を変えて、格納変数を生成するのが良さそうですが。

Comments

[suusui]

ありがとうございます！ご指示いただいたコードに変更したら無事に世界と日本のデータがそれぞれ取得できました。おしゃられる通り、国を日本以外の各国も表示したい場合、レスポンス内容で処理を変える必要がありそうです。また勉強して質問させていただこうと思います。ありがとうございました。