title: ReactJs - access nested array in JSON response
body: <p>JSON Response:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>Bars: [
  {
  id: "7",
  name: "The Trestle Inn",
  address: "339 N 11th St",
  city: "Philadelphia",
  state: "PA",
  category: "Dive Bar",
  checkIn: [
  {
  wait: "0.1",
  vibe: "0.35",
  crowd: "0.5"
  }
  ],
  eventname: "0"
  },
  {
  id: "9",
  name: "McGillin's Olde Ale House",
  address: "1310 Drury Street",
  city: "Philadelphia",
  state: "PA",
  category: "Pub",
  checkIn: [
  {
  wait: "0.1",
  vibe: "0.4",
  crowd: "0.2"
  }
  ],
  eventname: "0"
  },</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am using ReactJs, and attempting to iterate through "Bars", pulling data. I can successfully access the first-tier response, such as Name and Address, but I am failing to process the sub-array "checkIn", where I want to pull the values for 'vibe', 'wait', and 'crowd'.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var WebApp = React.createClass({
   componentDidMount: function(){
    this.loadFavoritesData();
   },
  
   render: function(){
    return(
        &lt;div&gt;
         &lt;Favorites favoritesData={this.state.favoritesData} /&gt;
         &lt;Newsfeed /&gt;
        &lt;/div&gt;
     )
   }
  });
  
  var Favorites = React.createClass({
   render: function(){
    //console.log(this.props.favoritesData);
  
    var favoriteNodes = this.props.favoritesData.map(function(favorite, index){
  
     var checkInNodes = favorite.checkIn.map(function(data){
      //console.log(data.vibe);
      return {data}
     });
  
     console.log(checkInNodes.vibe);
     
     return(
        &lt;Favorite
        name={favorite.name}
        address={favorite.address}
        key={index}
        vibe={checkInNodes.vibe}
        /&gt;
  
      )
    });
  
    return(
       &lt;div&gt;
         &lt;h2 className="page-header"&gt;Favorite Bars&lt;/h2&gt;
         {favoriteNodes}
       &lt;/div&gt;
     )
   }
  });
  
  var Favorite = React.createClass({
   render: function(){
    return(
      &lt;div className="favoriteItem"&gt;
       &lt;h4&gt;{this.props.name}&lt;/h4&gt;
       &lt;p&gt;{this.props.address}&lt;/p&gt;
       &lt;p&gt;Vibe: {this.props.vibe}&lt;/p&gt;
      &lt;/div&gt;
     )
   }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>I had initially figured I could access it within the first map function within the Favorites component, but when attempting something like the following, I get an undefined result for favorite.checkIn.vibe although if I console.log(favorite.checkIn) I will return the object, which again, I can't seem to dive into</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Favorites = React.createClass({
   render: function(){
    var favoriteNodes = this.props.favoritesData.map(function(favorite, index){
     console.log(favorite.checkIn.vibe);
     return(
        &lt;Favorite
        name={favorite.name}
        address={favorite.address}
        key={index}
        vibe={favorite.checkIn.vibe}
        /&gt;
  
      )
    });</code></pre>
  </div>
  </div>
  </p>