ReactJs :如何从数组中提取 Json 数据以将其显示在 react Carousel 的 div 上

Question

我在从API中提取Json数据时遇到了问题。

请帮助我纠正我的错误。

杰伦

[  
{  
"flagshipId":"18",
"BanquetValues":"<p>xzxzxczx</p>n",
"FloorPlan":"[{"id":1,"fileName":"megarugas-15243406450731525866511-1.jpg","ifActive":"1"},{"id":2,"fileName":"megarugas-15243406467351525866513-2.jpg","ifActive":"1"},{"id":3,"fileName":"megarugas-15244876214221526013635-3.jpg","ifActive":"1"}]",
"ChildDescription":"[{"id":1,"childName":"Ceremony 1 @ Megarugas","description":"xczxcxvx"}]",
"RestaurantId":"695"
}
]

我想将平面图数组中的文件名显示到我的轮播中。

JSX

render()
{
var banquetImg = this.props.IMG_BASE + this.props.RESTAURANT_BANNER_PATH
return (
<div className="photosSection">
{
this.props.banquetImageList.length != 0
?
<div className="body">
<div className="row">
<Carousel showArrows={true} >
{this.props.banquetImageList.map((row, i) =>
<div key={row.RestaurantAttachmentId} className={"row"}>
<img src={banquetImg + row.FileName} key={row.RestaurantAttachmentId}/>
<p className="get-final-price">Get Final Price</p>
</div>
)}
</Carousel>   
</div>
</div>
:
""
} 
</div>
);
}

Answer 1

我尝试了像 @AI.G. 这样的方法，这是我的代码：

let json_data = [
{  
"flagshipId":"18",
"BanquetValues":"<p>xzxzxczx</p>n",
"FloorPlan":"[{"id":1,"fileName":"megarugas-15243406450731525866511-1.jpg","ifActive":"1"},{"id":2,"fileName":"megarugas-15243406467351525866513-2.jpg","ifActive":"1"},{"id":3,"fileName":"megarugas-15244876214221526013635-3.jpg","ifActive":"1"}]",
"ChildDescription":"[{"id":1,"childName":"Ceremony 1 @ Megarugas","description":"xczxcxvx"}]",
"RestaurantId":"695"
}
];
floor_plan = JSON.parse(json_data[0]['FloorPlan']);
console.log(floor_plan);

这是我从终端(MacOS 10.13.4，NodeJS v8.11.1(得到的：

$ node test.js 
[ { id: 1,
fileName: 'megarugas-15243406450731525866511-1.jpg',
ifActive: '1' },
{ id: 2,
fileName: 'megarugas-15243406467351525866513-2.jpg',
ifActive: '1' },
{ id: 3,
fileName: 'megarugas-15244876214221526013635-3.jpg',
ifActive: '1' } ]

您可以从floor_plan(当前是一个数组(中获取每个元素。

这是你的目标吗？