ReactJs - access nested array in JSON response

Question

JSON Response:

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"
},

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'.

var WebApp = React.createClass({
	componentDidMount: function(){
		this.loadFavoritesData();
	},

	render: function(){
		return(
						<div>
							<Favorites favoritesData={this.state.favoritesData} />
							<Newsfeed />
						</div>
			)
	}
});

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(
						<Favorite
						name={favorite.name}
						address={favorite.address}
						key={index}
						vibe={checkInNodes.vibe}
						/>

				)
		});

		return(
					<div>
							<h2 className="page-header">Favorite Bars</h2>
							{favoriteNodes}
					</div>
			)
	}
});

var Favorite = React.createClass({
	render: function(){
		return(
				<div className="favoriteItem">
					<h4>{this.props.name}</h4>
					<p>{this.props.address}</p>
					<p>Vibe: {this.props.vibe}</p>
				</div>
			)
	}
});

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

var Favorites = React.createClass({
	render: function(){
		var favoriteNodes = this.props.favoritesData.map(function(favorite, index){
			console.log(favorite.checkIn.vibe);
			return(
						<Favorite
						name={favorite.name}
						address={favorite.address}
						key={index}
						vibe={favorite.checkIn.vibe}
						/>

				)
		});

Answer 1

Short Answer

I think you want to do this:

Bars[0].checkIn[0].wait

The second index seems to be missing from your code above.

Longer Answer

If you only ever have one object in the checkIn array, you might want to consider taking them out of the array so the object looks like this:

{
    id: "9",
    name: "McGillin's Olde Ale House",
    address: "1310 Drury Street",
    city: "Philadelphia",
    state: "PA",
    category: "Pub",
    checkInWait: "0.1",
    checkInVibe: "0.4",
    checkInCrowd: "0.2",
    eventname: "0"
}

and then the code would be much cleaner. If you can't change the data, try this:

for (var i = 0; i < Bars.length; i++) {
  // set the variables above the checkIn
  for (var j = 0; j < Bars[i].checkIn.length; j++) {
    // set Bars[i].checkIn[j].wait
    // set Bars[i].checkIn[j].vibe
    // set Bars[i].checkIn[j].crowd
  }
  // set the eventname variable
}