0
96
VistasAgrupar objetos por orden clave
Formular este problema es un poco complicado, así que tengan paciencia conmigo.
Estoy creando un componente de Preguntas frecuentes (FAQ), los registros se proporcionan como una lista de objetos, como a continuación:
[ { "slice_type": "information" }, /* Question 1 */ { "slice_type": "question" }, { "slice_type": "content" }, { "slice_type": "quote" }, { "slice_type": "content" }, /* Question 2 */ { "slice_type": "question" }, { "slice_type": "content" }, { "slice_type": "image" }, { "slice_type": "youtube_embed" } ... ]Como sabe, en las preguntas frecuentes plegables, la pregunta siempre está en el bloque de encabezado, mientras que el resto del contenido se encuentra en el cuerpo del componente.
Es por eso que necesito agrupar las respuestas de cada pregunta en una lista, luego podré obtener las respuestas deseadas por el índice de preguntas, esto es lo que me gustaría obtener.
[ [ { "slice_type": "content" }, { "slice_type": "quote" }, { "slice_type": "content" }, ], [ { "slice_type": "content" }, { "slice_type": "image" }, { "slice_type": "youtube_embed" } ], ... ]Me gustaría saber cómo puedo lograr este resultado programáticamente.
2 Respuestas
Responde la pregunta0
Se puede hacer con forEach() . Dado que es posible que tenga elementos antes de que comiencen realmente sus preguntas (como se muestra en los datos de muestra), debe comenzar su índice con -1.
let items = [ { "slice_type": "information" }, /* Question 1 */ { "slice_type": "question" }, { "slice_type": "content" }, { "slice_type": "quote" }, { "slice_type": "content" }, /* Question 2 */ { "slice_type": "question" }, { "slice_type": "content" }, { "slice_type": "image" }, { "slice_type": "youtube_embed" } ] let groupedItems = []; let quesIndex = -1; items.forEach((x) => { if(x.slice_type == 'question' ){ groupedItems.push([]); quesIndex++; } else if(quesIndex!=-1){ groupedItems[quesIndex].push(x); } }); console.log(groupedItems);0
Usando array#reduce ,
Puede iterar a través de la matriz y para cada elemento verificar si la propiedad slice_type es igual a "question"
- si crea una nueva matriz para esa pregunta,
- si no, agregue el objeto a la matriz de la pregunta anterior.
Al igual que:
let newData = data.reduce((acc, obj) => { if (obj.slice_type == "question") acc.push([]) else acc[acc.length - 1]?.push(obj) return acc }, [])Manifestación:
let data = [ {"slice_type": "dataBeforeQuestion"}, /* Question 1 */ { "slice_type": "question" }, { "slice_type": "content" }, { "slice_type": "quote" }, { "slice_type": "content" }, /* Question 2 */ { "slice_type": "question" }, { "slice_type": "content" }, { "slice_type": "image" }, { "slice_type": "youtube_embed" } ] let newData = data.reduce((acc, obj) => { if (obj.slice_type == "question") acc.push([]) else acc[acc.length - 1]?.push(obj) return acc }, []) console.log(newData) .as-console-wrapper {min-height: 100%!important; top: 0;}