Menu
I am trying to map over array of objects which each array contains another nested array of objects. However, the map does not work on the nested array. How do i map over the contents of the nested array while keeping all the content under the same title of the parent object?
Fiddle: https://jsfiddle.net/69z2wepo/249197/
The data structure looks like:
[
{
title: "title1",
content: [
{
imageUrl: "http://placehold.it/300x300",
title: "Campaigns",
description:
"Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "Events",
description:
"Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "General",
description:
"Short description explaining the use of this design in a single sentence."
}
]
},
{
title: "title2",
content: [
{
imageUrl: "http://placehold.it/300x300",
title: "Video Template A",
description:
"Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "Video Template A",
description:
"Short description explaining the use of this design in a single sentence."
}
]
}
];
The map looks like
{dataItems.map((item, index) => {
return (
<h1>{item.title}</h1>
// for each item, loop over the content array objects
<img src={item.content.imageUrl} />
<h3>{item.content.title}</h3>
<h3>{item.content.description}</h3>
<hr />
);
})}
930
To render a nested array using map(): Use the map() method to iterate over the outer array. On each iteration, call the map() method on the nested array. Render the elements of the nested array.
If we want to access all the values of nested objects then we have to use recursion to access each and every level of that object. And it can get more complicated according to the nesting of the object. That why we have to use recursion to get all the values and access the whole nested object.
To map through an object's value in React:Use the Object. values() method to get an array of the object's values. Call the map() method on the array of values.
Nested Array in JavaScript is defined as Array (Outer array) within another array (inner array). An Array can have one or more inner Arrays. These nested array (inner arrays) are under the scope of outer array means we can access these inner array elements based on outer array object name.
Since each element has a content array, you must map over content as well.
Example
{dataItems.map((item, index) => (
<div key={index}>
<h1>{item.title}</h1>
{item.content.map((c, i) => (
<div key={i}>
<img src={c.imageUrl} />
<h3>{c.title}</h3>
<h3>{c.description}</h3>
<hr />
</div>
))}
</div>
))}
This is a working example.
const dataItems = [{
title: "title1",
content: [{
imageUrl: "http://placehold.it/300x300",
title: "Campaigns",
description: "Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "Events",
description: "Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "General",
description: "Short description explaining the use of this design in a single sentence."
}
]
},
{
title: "title2",
content: [{
imageUrl: "http://placehold.it/300x300",
title: "Video Template A",
description: "Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "Video Template A",
description: "Short description explaining the use of this design in a single sentence."
}
]
}
];
class App extends React.Component {
render() {
return <div>
{
dataItems.map((item, index) => {
return ( <div>
<h1>{item.title}</h1>
{ item.content.map((c, i) => <div>
<h3>{c.title}</h3>
<h3>{c.description}</h3>
</div>)}
</div>
)
})
}
</div>
}
}
ReactDOM.render( < App / > , document.getElementById('root'));<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
