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

If json_object[0].FloorPlan is the serialized object, you can convert it to json using JSON.parse(json_string_here). — Al.G.
– Al.G., Commented May 20, 2018 at 14:24
@Al.G. thanks for your response. Can you please help me to do so. iam unable to fix it. — Tammy
– Tammy, Commented May 20, 2018 at 14:26
Yes, of course. Write JSON.parse(json_object[0].FloorPlan) and you'll get the array needed. — Al.G.
– Al.G., Commented May 20, 2018 at 14:29
@Al.G. it returned with Uncaught TypeError: Cannot read property 'FloorPlan' of undefined — Tammy
– Tammy, Commented May 21, 2018 at 3:58

Le Duong Tuan Anh · Accepted Answer · 2018-05-21 04:29:50Z

2

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?

answered May 21, 2018 at 4:29

Le Duong Tuan Anh

3603 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tammy Over a year ago

hi , console.log(this.props.banquetFlagship[0]['FloorPlan'], "uspArray") and i am getting Uncaught TypeError: Cannot read property 'FloorPlan' of undefined

Al.G. Over a year ago

@TanmoySarkar this an error with react properties. Your question is about json parsing, not react. Please don't ask 2 different questions at once. This is the correct answer for your question about extracting elements from serialized array. If you have a question about how to render the values in react, go ask another question and mark this answer as accepted if it solved the problem with extracting the values.

Le Duong Tuan Anh Over a year ago

@TanmoySarkar Can you log this.props.banquetFlagship to here?

Collectives™ on Stack Overflow

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

JSON

JSX

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

JSON

JSX

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related