ReactJs -访问JSON响应中的嵌套数组

Question

JSON响应：

​

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

​

我正在使用ReactJs，并试图遍历“条”，拉取数据。我可以成功地访问第一层响应，比如Name和Address，但是我无法处理子数组"checkIn"，在这里我想拉取“vibe”、“wait”和“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>
			)
	}
});

​

我最初认为我可以在Favorites组件中的第一个映射函数中访问它，但是当尝试执行以下操作时，我得到了一个未定义的favorite.checkIn.vibe结果，尽管如果我使用console.log(favorite.checkIn)，我将返回该对象，同样，我似乎无法深入研究该对象

​

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

简短的回答

我认为你想这么做：

Bars[0].checkIn[0].wait

上面的代码中似乎缺少第二个索引。

更长的答案

如果checkIn数组中只有一个对象，则可能需要考虑将它们从数组中取出，使对象看起来像这样：

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

这样代码就会干净得多。如果您不能更改数据，请尝试以下操作：

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
}