dummys-guide-to-redux-and-thunk-react icon indicating copy to clipboard operation
dummys-guide-to-redux-and-thunk-react copied to clipboard

How to pass the json data in different format ?

Open huzefahusain opened this issue 6 years ago • 1 comments

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

huzefahusain avatar Nov 24 '18 13:11 huzefahusain

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.

bebyx avatar Feb 14 '20 20:02 bebyx