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，并且试图通过 “栏” 来迭代，拔数据。我可以成功访问第一层响应，例如名称和地址，但是我无法处理子数组“checkIn”，我想在其中为“vibe”，“wait”和“crowd”拉取值， 。

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

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

 
var Favorites = React.createClass({ 
 
\t render: function(){ 
 
\t \t //console.log(this.props.favoritesData); 
 

 
\t \t var favoriteNodes = this.props.favoritesData.map(function(favorite, index){ 
 

 
\t \t \t var checkInNodes = favorite.checkIn.map(function(data){ 
 
\t \t \t \t //console.log(data.vibe); 
 
\t \t \t \t return {data} 
 
\t \t \t }); 
 

 
\t \t \t console.log(checkInNodes.vibe); 
 
\t \t \t 
 
\t \t \t return(
 
\t \t \t \t \t \t <Favorite 
 
\t \t \t \t \t \t name={favorite.name} 
 
\t \t \t \t \t \t address={favorite.address} 
 
\t \t \t \t \t \t key={index} 
 
\t \t \t \t \t \t vibe={checkInNodes.vibe} 
 
\t \t \t \t \t \t /> 
 

 
\t \t \t \t) 
 
\t \t }); 
 

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

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

我最初想我可以在收藏夹组件内的第一个地图功能中访问它，但试图像下面这样的时候，我得到了favorite.checkIn.vibe一个未定义的结果但如果我CONSOLE.LOG（favorite.checkIn）我将返回对象，再次，我似乎无法潜入

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

 
\t \t \t \t) 
 
\t \t });

Answer 1

简答

我想你想这样做：

Bars[0].checkIn[0].wait

第二个索引似乎是从你的代码上述失踪。

再回应

如果你永远只能有一个对象签入阵中，你可能要考虑把他们从数组所以对象看起来是这样的：

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