0
239
Vistas¿Cómo agrupar matrices alfabéticamente con JavaScript?
Tengo una matriz que tiene varias otras matrices dentro. Todos los datos ya están ordenados alfabéticamente.
Lo que me gustaría saber es ¿cómo puedo agrupar alfabéticamente?
Al igual que en la imagen de ejemplo a continuación:
Aquí está mi proyecto que puse en codesandbox
import "./styles.css"; import { data } from "./data"; export default function App() { console.log("data: ", data); return ( <div className="App"> <h1>Hello CodeSandbox</h1> {data.map((item, index) => ( <div key={index}> {item.map((item2, index2) => ( <div key={index2}> <span>{item2.title}</span> </div> ))} </div> ))} </div> ); }¡¡¡Gracias de antemano por cualquier ayuda!!!
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
TL;DR. Vea el Code Sandbox que cloné y edité del suyo.
En resumen, hice algo como lo siguiente:
import "./styles.css"; import { data } from "./data"; export default function App() { // Flatten `data` array const merged = []; data.map((arr) => arr.map((item) => merged.push(item))); // Reduce `merged` array by initial character of `title` const mapped = merged.reduce((acc, item) => { const letter = item.title[0].toLowerCase(); if (!acc[letter]) { acc[letter] = []; } acc[letter].push(item); return acc; }, {}); const letters = Object.keys(mapped); return ( <div className="App"> <h1>Grouped by the first initial</h1> {letters.map((letter, i) => ( <div key={i}> <h2>{letter}</h2> {mapped[letter].map((item, j) => ( <div key={j}>{item.title}</div> ))} </div> ))} </div> ); }- Aplane la matriz
dataen la variablemerged. - Reduzca la
mergeden un objeto similar a un diccionario (por cada primera inicial) en la variablemapped. - Luego renderice haciendo ping en el
mapde la matrizmerged.
Véalo en acción en Code Sandbox .
·
Juan Pablo Isaza
Denunciar
Responde la pregunta