I am fetching an array from my database , I am trying to map it in carousel, each slide must have 2 elements ,the next slide is 2 elements as well and so forth. I will explain this in the codes . This is the JSON format of the array :
{
"data": {
"allPrismicBlog": {
"nodes": [
{
"data": {
"author": "Darius Aeres",
"date": "15 Aug 2022"
}
},
{
"data": {
"author": "Ahmed Jalal",
"date": "13 June 2022"
}
},
{
"data": {
"author": "Djalal Aymani",
"date": "8 June 2022"
}
},
{
"data": {
"author": "Jane Cooper",
"date": "3 Aug 20"
}
},
{
"data": {
"author": "Khalid Sayed",
"date": "16 Aug 2022"
}
},
{
"data": {
"author": "Mohammed Yaakoubi",
"date": "1 July 2022"
}
},
{
"data": {
"author": "Karim Baghta",
"date": "5 May 2022"
}
},
{
"data": {
"author": "Jacob Sefrioui",
"date": "15 Aug 2022"
}
}
]
}
},
"extensions": {}
}
and this is how I am trying to map the slides:
<Carousel>
{allBlogs.nodes.slice(0, Math.round(allBlogs.nodes.length/2)).map((node,index)=>
(
<Slide>
{allBlogs.nodes.slice(index, 2).map((blog)=>
(
<BlogAuthor>
<Author>{blog.data.author}</Author>
<BlogDate>{blog.data.date}</BlogDate>
</BlogAuthor>
)
)}
</Slide>
)}
</Carousel>
So in this array mapping is working kind of intended , but the mistake is I don't get all my blog , for example in the first slide it will display the 2 first elements of the array successfully , in the second slide it will get only a single element and it will have the index of the first slide's last element (1) .
I need a way to fix this to display in every slide 2 elements from the array accordingly !
I hope you did understand this question.
I think you are trying to use slice to split the array nodes into pairs of two - but that's not how slice works. It will give you just one array which is a subset of nodes.
Look at this answer to see how to split an array into pairs of two elements each:
const nodePairs = allBlogs.nodes.reduce(
(result, value, index, array) => {
if (index % 2 === 0)
result.push(array.slice(index, index + 2));
return result;
}, []);
Use this function on your nodes array and then iterate over the pairs:
nodePairs.map(pair => (
<Slide>
{pair.map((blog) => (
<BlogAuthor>
<Author>{blog.data.author}</Author>
<BlogDate>{blog.data.date}</BlogDate>
</BlogAuthor>)
}
</Slide>))