stowball / dummys-guide-to-redux-and-thunk-react

Tutorial post
https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3#.44hlq3vvt
321 stars 145 forks source link

How to pass the json data in different format ? #6

Open huzefahusain opened 5 years ago

huzefahusain commented 5 years ago

Below is the JSON file data format which I am not able to pass using your example, any help ?

{
"banner": [ { "key": "product", "id": "84535", "image_url": "/media/emthemes/slideshow/s/u/sultry-app_12.jpg" }, { "key": "category", "id": "2629", "image_url": "/media/emthemes/slideshow/l/i/limecrime-app.jpg" }, { "key": "product", "id": "84654", "image_url": "/media/emthemes/slideshow/a/m/ameera-app-banner.jpg" } ] }

bebyx commented 4 years ago

If you share a problematic piece of code it would help community to assist in solving the problem.

I can only assume that the JSON given in the @stowball 's app returns an array (pay attention to root [ ], squre brackets), and it returns an Object in your case (you have root { }, curly brackets). That's the difference.

Instead of this code:

{this.props.items.map((item) => (
      <li key={item.id}>
             {item.label}
      </li>
))}

You should have something like this:

{this.props.items.banner.map((item) => (
      <li key={item.id}>
             {item.key}
             {item.id}
             <img src={item.image_url} alt=""/>
      </li>
))}

We need to get banner Object first and only then map an Array which it holds.