How to map objects data inside object in React?

Question

In a React project, I'm calling data from JSON data as:

In short JSON data is as:

const listData =  [
{
"_id":"abscdf456",
"bucket": {code: "videos"}
"contents": [
{}, {}, {}, {}
]
},
{
"_id":"absusi789",
"bucket": {code: "videos"}
"contents": [
{}, {}, {}, {}, {}, {}
]
},
{
"_id":"abssth7890",
"bucket": {code: "photos"}
"contents": [
{}, {}, {}, {},{}, {},{}, {}, {}
]
},
{
"_id":"yuiaf456",
"bucket": {code: "videos"}
"contents": [
{}, {}, {}
]
}
]

I have tried in the following way

listData.map((data) => (
<div>
{
data.bucket.code == "videos" ? 
({/* Map only videos contents object */}) : ({/* Map only photos contents object */})
}
</div>
))

Another trial I did is const videoData = listData.filter(data => data.bucket.code === "videos") but, no use as It got repeated many times

So basically My intention is to map the 'contents object' of each bucket non-repeated. What could be the best possible solution?

Does this answer your question? [Most efficient method to groupby on an array of objects](https://stackoverflow.com/questions/14446511/most-efficient-method-to-groupby-on-an-array-of-objects) — Roberto Zvjerković, Mar 09 '21 at 15:42
What was wrong with your "I have tried in the following way" approach? That's how I'd do it. — James, Mar 09 '21 at 15:47

score 0 · Answer 1 · answered Mar 09 '21 at 15:51

I believe you need to map the array with forEach or using the filter to not repeat yourself as you want.

I put a list to show item by item <ul> <li>

content 1
content 2
content 3

listData.map((data) => (
    <div key={data._id)}>
       {data.bucket.code === 'videos' && (
          <ul>
            {data.contents.forEach((content) => {
              <li key={content.somethingToKey}>{content}</li>
            })}
          </ul>
       )}
       {data.bucket.code === 'photos' && ({/* Map only photos contents object */})}          
    </div>
));

score 0 · Answer 2 · answered Mar 09 '21 at 15:56

Expanding on the way you tried it:

const renderVideo = (video) => (<div>{video.name}</div>);
const renderPhoto = (photo) => (<div>{photo.name}</div>);

listData.map((data) => (
<div>
{
  data.bucket.code == "videos" ? 
    data.contents.map(video => renderVideo(video)) : 
    data.contents.map(photo => renderPhoto(photo))
}
</div>
));

How to map objects data inside object in React?

2 Answers2