ReactJs: как извлечь данные Json из массива, чтобы отобразить их на карте реагирующей карусели

Question

У меня проблема с извлечением данных Json, поступающих из 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"
   }
]

Я хочуотобразить имя файла из массива FloorPlan в мою карусель.

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 (который в настоящее время является массивом).

Это ваша цель?