ReactJs : how to extract Json data from an array to display it on a div of react Carousel

Question

I am facing a issue on extracting the Json data coming from an API.

Please help me to rectify my mistake.

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

I want to display filename from array of FloorPlan into my carousel.

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

I've tried an approach like @AI.G. and this is my code:

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);

And this is what I got from terminal (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' } ]

You can get each element from floor_plan (which is currently an array).

Is this your target?