Given the following array:
const arr = [
{ id: 1, type: 'tab', content: 'Tab 1'},
{ id: 20, type: 'tabContent', content: 'Tab 1 content...' },
{ id: 2, type: 'tabContent', content: 'Tab 1 content...' },
{ id: 3, type: 'tabContent', content: 'Tab 1 content...' },
{ id: 5, type: 'tabContent', content: 'Tab 1 content...' },
{ id: 22, type: 'tab', content: 'Tab 2' },
{ id: 7, type: 'tabContent', content: 'Tab 2 content...' },
{ id: 8, type: 'tabContent', content: 'Tab 2 content...' },
{ id: 9, type: 'tabContent', content: 'Tab 2 content...' },
{ id: 10, type: 'tabContent', content: 'Tab 2 content...' },
{ id: 11, type: 'tabContent', content: 'Tab 2 content...' },
{ id: 12, type: 'tabContent', content: 'Tab 2 content...' },
{ id: 99, type: 'tab', content: 'Tab 3' },
{ id: 14, type: 'tabContent', content: 'Tab 3 content...' },
{ id: 15, type: 'tabContent', content: 'Tab 3 content...' },
{ id: 16, type: 'tabContent', content: 'Tab 3 content...' },
{ id: 17, type: 'tabContent', content: 'Tab 3 content...' },
];
Id like the array to end up looking like:
const arr = [
{ id: 1, type: 'tab', content: 'Tab 1', childContent: [
{ id: 20, type: 'tabContent', content: 'Tab 1 content...' },
{ id: 2, type: 'tabContent', content: 'Tab 1 content...' },
{ id: 3, type: 'tabContent', content: 'Tab 1 content...' },
{ id: 5, type: 'tabContent', content: 'Tab 1 content...' },
]},
{ id: 22, type: 'tab', content: 'Tab 2', childContent: [
{ id: 7, type: 'tabContent', content: 'Tab 2 content...' },
{ id: 8, type: 'tabContent', content: 'Tab 2 content...' },
{ id: 9, type: 'tabContent', content: 'Tab 2 content...' },
{ id: 10, type: 'tabContent', content: 'Tab 2 content...' },
{ id: 11, type: 'tabContent', content: 'Tab 2 content...' },
{ id: 12, type: 'tabContent', content: 'Tab 2 content...' },
] },
{ id: 99, type: 'tab', content: 'Tab 3', childContent: [
{ id: 14, type: 'tabContent', content: 'Tab 3 content...' },
{ id: 15, type: 'tabContent', content: 'Tab 3 content...' },
{ id: 16, type: 'tabContent', content: 'Tab 3 content...' },
{ id: 17, type: 'tabContent', content: 'Tab 3 content...' },
] },
];
Got the keys indexes:
const keys = []
arr.map((item, index) => {
if (item.type === 'tab') {
keys.push(index)
}
})
console.log('keys: ', keys)
"keys: ", [0, 5, 12]
Based on the found indexes, how can I group the items within the array to their found indexes until the next occurrence happens?
Since the input and output items aren't one-to-one, .map won't work.
A plain loop will, though - while iterating, just check if it's tab or tabContent, and if tabContent, push to the childContent of the last array pushed.
const arr=[{id:1,type:"tab",content:"Tab 1"},{id:20,type:"tabContent",content:"Tab 1 content..."},{id:2,type:"tabContent",content:"Tab 1 content..."},{id:3,type:"tabContent",content:"Tab 1 content..."},{id:5,type:"tabContent",content:"Tab 1 content..."},{id:22,type:"tab",content:"Tab 2"},{id:7,type:"tabContent",content:"Tab 2 content..."},{id:8,type:"tabContent",content:"Tab 2 content..."},{id:9,type:"tabContent",content:"Tab 2 content..."},{id:10,type:"tabContent",content:"Tab 2 content..."},{id:11,type:"tabContent",content:"Tab 2 content..."},{id:12,type:"tabContent",content:"Tab 2 content..."},{id:99,type:"tab",content:"Tab 3"},{id:14,type:"tabContent",content:"Tab 3 content..."},{id:15,type:"tabContent",content:"Tab 3 content..."},{id:16,type:"tabContent",content:"Tab 3 content..."},{id:17,type:"tabContent",content:"Tab 3 content..."}];
const result = [];
for (const obj of arr) {
if (obj.type === 'tab') {
result.push({ ...obj, childContent: [] });
} else {
result[result.length - 1].childContent.push(obj);
}
}
console.log(result);