JSONのデータのアクセス方法が知りたい

Question

下記サイトのJSONファイルから情報を取得したいと思っています。
https://worldcup.sfg.io/matches
JSONにアクセスし、mapで回して、情報を表示するというシンプルなものです。

ただ、オブジェクトの中にある配列？（表現が間違っていたらすみません。）へのアクセス方法がわかりません。
具体的には、home_team_events> timeにアクセスしたいのですが、できません。
下記のコードでは、<MatchTexts>{item.home_team_events.time}</MatchTexts>というように試していますが、これではだめでした。

よろしくお願いします。

class App extends Component {
  constructor(){
    super();
    this.state = {
      matchDatas:[]
    };
  }
  componentWillMount(){
    const request = axios.create({
      baseURL: 'https://worldcup.sfg.io/'
    })
    request.get('/matches')
      .then(res => {
        this.setState({
          matchDatas: res.data
        });
      })
  }
  render() {
    return (
      <Fragment>
        {this.state.matchDatas.map((item, index) => (
          <MatchItem key={index}>
            <TeamWrap>
              <Team>{item.home_team_country}</Team>
            </TeamWrap>
            <StatsWrap>
              <MatchHeading>Stats</MatchHeading>
              <GoalWrap>
                <Goal>{item.home_team.goals}</Goal>
              </GoalWrap>
            </StatsWrap>
            <EventWrap>
              <MatchHeading>Events</MatchHeading>
              <EventDetail>
                <Event>{item.home_team_events.type_of_event}</Event>
                <MatchTexts>{item.home_team_events.time}</MatchTexts>
              </EventDetail>
            </EventWrap>
          </MatchItem>
        ))}
      </Fragment>
    );
  }
}

Answer 1

こんにちは。

item.home_team_events は以下のような配列になっています。

(※上記の画面キャプチャは、補足に書いたRestlet Client のレスポンスJSONの表示部分から取りました。)

ですので、例えば以下のようにすると取得できます。

      <EventWrap>
        <MatchHeading>Events</MatchHeading>
        {item.home_team_events.map((event,i) => (
          <EventDetail key={i}>
            <Event>{event.type_of_event}</Event>
            <MatchTexts>{event.time}</MatchTexts>
          </EventDetail>
        ))}
      </EventWrap>

上記を検証するコードを作成して以下に上げました。

https://jsfiddle.net/jun68ykt/bw6o1ajx/7/

なお、上記のコードでは、itemの中を console.log で確認するために、ご質問にあるコードを適宜修正しています。

以上参考になれば幸いです。

---

補足

WEB APIにテストでリクエストを投げ、その結果を表示する何らかのツールはお使いでしょうか？

私はChrome拡張機能のRestlet Client を使っていますが、リクエストメソッドやヘッダを色々変えながらWeb API にリクエストを送ることができ、レスポンスの JSON を以下のようにフォーマットして表示してくれるので、JSONの階層構造やプロパティを確認するために便利です。

Comments

[www-www]

jun68yktさま

ご回答ありがとうございます。

希望どおりの形になりました。
ありがとうございます！！

また、Restlet Clientについてもご紹介いただきましてありがとうございます。
正直現時点ではどのように使用すべきか理解できておりませんが、こちらも合わせて使用してみます。

[jun68ykt]

www-wwwさん
解決されたようですね、よかったです！