React/JSX - iterating JSON object & nest every X items in .row - json

Question

There must be an easy answer to this but I can't seem to find one.
JSON: -
{
1: {
'desc' : 'desc1',
'title' : 'title 1',
},
2: {
'desc' : 'desc2',
'title' : 'title 2',
},
3: {
'desc' : 'desc3',
'title' : 'title 3',
},
4: {
'desc' : 'desc4',
'title' : 'title 4',
},
5: {
'desc' : 'desc5',
'title' : 'title 5',
},
6: {
'desc' : 'desc6',
'title' : 'title 6',
},
};
So basically I want to iterate this object and have every 3 items nest in a .row class div like this: -
<div class='row'>
<div>desc1 : title1</div>
<div>desc2 : title2</div>
<div>desc3 : title3</div>
</div>
<div class='row'>
<div>desc4 : title4</div>
<div>desc5 : title5</div>
<div>desc6 : title6</div>
</div>
Now I understand how I can simple render() this in a component: -
{
Object.keys(JSONObject).map(key => <TheComponent key={key} details={JSONObject[key]} />)
}
However, I am stumped as to how I can split this into 2 rows of 3 items and nest each of the 3 items in the .row div.
Any help greatly appreciated. I am relatively new to ES6/ReactJS and eager to get past the teething problems.

Answer 1

One way of looking at this is to split the array up first into chunks, then working with that.
So you could get your initial array;
var ar1 = Object.keys(JSONObject);
Then chunk it up
var ar2 = [];
var i, j, chunk = 3;
for (i = 0, j = ar1.length; i < j; i += chunk) {
ar2.push(ar1.slice(i, i+chunk));
}
This will then give you ar2 which is an array of arrays. You could then either loop through this and output the level one array with the rows, then the level 2 array with the inner html.
See this basic bit of code on jsbin to demo the chunking

Answer 2

let arrTheComponent = [], arrJson = [];
Object.keys(JSONObject).map(key => {
arrJson.push(JSONObject[key]);
if (arrJson.length === 3) {
arrTheComponent.push(<TheComponent json={arrJson} />);
arrJson = [];
}
})
Display the component
export const TheComponentList = () => {
let arrTheComponent = [], arrJson = [];
Object.keys(JSONObject).map(key => {
arrJson.push(JSONObject[key]);
if (arrJson.length === 3) {
arrTheComponent.push(<TheComponent json={arrJson} />);
arrJson = [];
}
})
return (<div>
{arrTheComponent}
</div>);
}

Answer 3

I did something very similar, so here is the code I used:
let rowCount = 0;
let rows = [];
Object.keys(JSONObject).forEach((k, i) => {
// this just makes sure there is always an array initialised
rows[rowCount] = rows[rowCount] || [];
// now we add into the current row a component
rows[rowCount].push(
<TheComponent
key={k}
details={JSONObject[key]}
/>
);
if ((i + 1) % 3 === 0) { // the 3 here is how many items you want per row!!
// if we can perfectly divide the current position by 3
// we have filled a row, so now increment the row
rowCount++;
}
});
This will give you an array of arrays:
[
[ <TheComponent key=1 />, <TheComponent key=2 /> <TheComponent key=3 /> ]
[ <TheComponent key=4 /> ... ]
[ .... ]
]
Then you can render like this:
render() {
const rows = this.groupRows(); // this is the function above
// ar below is a single array of <TheComponent ... /> so looks like:
// [ <TheComponent ... />, ... ]
return (
<div>
{ rows.map((ar, i) => <div className="row"> { ar } </div>) }
</div>
);
}
Addendum
I actually created a component to do this for me, so I could use it like so:
render() {
return (
<Grouper>
{ Object.keys(JSONObject).map(k => <TheComponent key={k} details={ JSONObject[key] } />) }
</Grouper>
);
}
And what the <Grouper /> component did was React.Children.forEach(...) grouping them using the code I have above. Which meant all that component scaffolding code was nicely abstracted away from the business view logic.