0
228
Views¿Cómo interactuar a través de una matriz en un objeto agrupado por clave?
En la matriz dada, estoy agrupando por propiedad llamada Value y el resultado es un objeto donde la clave es el Value y el valor son arrays coincidentes. Ahora estoy tratando de hacer un bucle y generar todos los data por key .
Entonces, el resultado deseado sería mostrar todos los objetos por su clave. Algo como en la captura de pantalla a continuación, solo que en mi caso los datos se agrupan por valor.
Aquí está el código y el enlace del sandbox
import "./styles.css"; import { groupBy } from "lodash"; const data = [ { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" }, { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" }, { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "5" }, { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" }, { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "5" }, { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "20" }, { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "5" }, { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "20" } ]; export default function App() { const grouppedByValue = groupBy(data, "Value"); console.log(grouppedByValue); console.log(Object.keys(grouppedByValue)); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); }3 answers
Answer question0
Hasta que edite la publicación, asumiré que está tratando de mapear cada clave del objeto grouppedByValue y luego iterar la matriz de cada grouppedByValue[key] .
Esto es un ejemplo:
{Object.entries(grouppedByValue).map(([key, value], kidx) => ( <div key={`k-${kidx}`}> {value.map((el, idx) => ( <span key={`el-${idx}`}>{JSON.stringify(el)}</span> ))} </div> ))} Tenga en cuenta que estoy usando kidx e idx para dar a los niños las claves necesarias según lo solicitado por React.
Este ejemplo genera el objeto completo, pero siéntete libre de extraer la información necesaria de él.
Si no está familiarizado con Object.entries() , consulte esta documentación de MDN .
Esta es la implementación completa basada en su muestra.
import "./styles.css"; import { groupBy } from "lodash"; const data = [ { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" }, { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" }, { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "5" }, { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" }, { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "5" }, { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "20" }, { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "5" }, { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "20" } ]; export default function App() { const grouppedByValue = groupBy(data, "Value"); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> {Object.entries(grouppedByValue).map(([key, value], kidx) => ( <div key={`k-${kidx}`}> {value.map((el, idx) => ( <span key={`el-${idx}`}>{JSON.stringify(el)}</span> ))} </div> ))} </div> ); } 
0
puedes usar Object.entries para eso de esta manera
import "./styles.css"; import { groupBy } from "lodash"; const data = [ { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" }, { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" }, { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "5" }, { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" }, { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "5" }, { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "20" }, { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "5" }, { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "20" } ]; export default function App() { const grouppedByValue = groupBy(data, "Value"); console.log(grouppedByValue); console.log(Object.keys(grouppedByValue)); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> {Object.entries(grouppedByValue).map(([value, items]) => <div key={value}> <div>{value}</div> <ul> {items.map((item, i) => <li key={i}>Phase :{item.Phase} </li>) </ul> </div>) </div> ); }0
Puede usar Object.entries para obtener tanto la clave como el valor al mismo tiempo.
Estructura DOM para hacer similar a la captura de pantalla de OP.
import "./styles.css"; import { groupBy } from "lodash"; const data = [ { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" }, { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" }, { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "5" }, { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" }, { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "5" }, { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "20" }, { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "5" }, { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "20" } ]; export default function App() { const grouppedByValue = groupBy(data, "Value"); console.log(grouppedByValue); console.log(Object.keys(grouppedByValue)); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> {Object.entries(grouppedByValue).map(([key, value]) => ( <div> <div><strong>{key}</strong></div> {value.map((el) => ( <div>{el.Phase}, {el.Step}, {el.Task}</div> ))} </div> ))} </div> ); } 