Dada la siguiente matriz:
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...' }, ];Me gustaría que la matriz terminara pareciéndose a:
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...' }, ] }, ];Obtuve los índices de las claves:
const keys = [] arr.map((item, index) => { if (item.type === 'tab') { keys.push(index) } }) console.log('keys: ', keys)"teclas: ", [0, 5, 12]
Según los índices encontrados, ¿cómo puedo agrupar los elementos dentro de la matriz en sus índices encontrados hasta que ocurra la próxima vez?
Dado que los elementos de entrada y salida no son uno a uno, .map no funcionará.
Sin embargo, un ciclo simple lo hará: durante la iteración, solo verifique si es tab o tabContent , y si tabContent , empuje al childContent de la última matriz empujada.
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);