title: React Native: How to access data in JSON object?
body: <p>I want to access data inside JSON object but I do not know how to in this case.
  1. Why does my below example not work?
  2. After fetching the whole JSON data, how can I navigate through the data to access necessary elements? I do not even know what to try or even where in the code to do this since I am already failing to even access one simple data.</p>
  
  <h3>Short explanation</h3>
  
  <p>Below works:</p>
  
  <pre><code>dataSource: responseJson.shosfc.weekday[7]
  renderItem={({item}) =&gt; &lt;Text&gt;{item.min}&lt;/Text&gt;}
  </code></pre>
  
  <p>This does not. <strong>WHY?</strong>
  All I did was simply moving <code>.shosfc.weekday[7]</code></p>
  
  <pre><code>dataSource: responseJson
  renderItem={({item}) =&gt; &lt;Text&gt;{item.shosfc.weekday[7].min}&lt;/Text&gt;}
  </code></pre>
  
  <p>JSON API: <a href="https://api.myjson.com/bins/18o9sd" rel="nofollow noreferrer">https://api.myjson.com/bins/18o9sd</a></p>
  
  <p>Second one gives an error:</p>
  
  <pre><code>TypeError: Cannot read property 'weekday' of undefined
  
  This error is located at:
  
      in CellRenderer (at VirtualizedList.js:688)
      in RCTScrollContentView (at ScrollView.js:1007)
      in RCTScrollView (at ScrollView.js:1147)
      in ScrollView (at VirtualizedList.js:1081)
      in VirtualizedList (at FlatList.js:634)
      in FlatList (at App.js:42)
      in RCTView (at View.js:35)
      in View (at App.js:41)
      in FetchExample (at renderApplication.js:40)
      in RCTView (at View.js:35)
      in View (at AppContainer.js:98)
      in RCTView (at View.js:35)
      in View (at AppContainer.js:115)
      in AppContainer (at renderApplication.js:39)
  
  renderItem
      injectUpdate.js:71:4
  FlatList._this._renderItem
      FlatList.js:628:13
  CellRenderer.render
      VirtualizedList.js:1741:20
  CellRenderer.proxiedMethod
      createPrototypeProxy.js:44:29
  </code></pre>
  
  <p>Below is the entire code.</p>
  
  <pre><code>import React from 'react';
  import { FlatList, ActivityIndicator, Text, View  } from 'react-native';
  
  export default class FetchExample extends React.Component {
  
      constructor(props){
          super(props);
          this.state ={ isLoading: true}
      }
  
      // make an API call in the beginning
      componentDidMount(){
          return fetch('https://api.myjson.com/bins/wa759')
              .then((response) =&gt; response.json())
              .then((responseJson) =&gt; {
  
                  this.setState({
                      isLoading: false,
                      dataSource: responseJson.shosfc.weekday[7]
                  }, function(){
  
                  });
  
              })
              .catch((error) =&gt;{
                  console.error(error);
              });
      }
  
      render(){
  
          if(this.state.isLoading){
              return(
                  &lt;View style={{flex: 1, padding: 50}}&gt;
                      &lt;ActivityIndicator/&gt;
                  &lt;/View&gt;
              )
          }
  
          return(
              &lt;View style={{flex: 1, paddingTop:50}}&gt;
                  &lt;FlatList
                      data={this.state.dataSource}
                      renderItem={({item}) =&gt; &lt;Text&gt;{item.min}&lt;/Text&gt;}
                      // keyExtractor={({id}, index) =&gt; id}
                  /&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>