Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

163
Vistas
Javascript: ¿cómo mapeo una matriz de objetos a una tabla de datos con nombres de columna?

Tengo algunos datos como este, una matriz de objetos:

 source = [{ day: 1, deliveries: 16, hours: 9 }, { day: 2, deliveries: 19, hours: 11 }]

Que me gustaría tener en este formato:

 source = (['day', 'deliveries', 'hours'], ['1', '16', '9'], ['2', '19', '11'])

Algo así como una mesa. Leí un poco sobre matrices de mapeo e intenté esto:

 const datatable = source.map(d => Array.from(Object.keys(d))) console.log(datatable) // [["day", "deliveries", "hours"], ["day", "deliveries", "hours"]]

Y esto:

 const datatable = source.map(d => Array.from(Object.values(d))) console.log(datatable) // [[1, 16, 9], [2, 19, 11]]

Cada uno me da la mitad de lo que quiero. Intenté esto:

 let datatable = source.map(d => Array.from(Object.keys(d))) let datatable2 = source.map(d => Array.from(Object.values(d))) datatable = datatable[1] let combined = datatable.concat(datatable2); console.log(combined) ///["day", "deliveries", "hours", [1, 16, 9], [2, 19, 11]]

Pero incluso aquí, los nombres de las columnas no se combinan correctamente, y de esta manera parece un poco desordenado. ¿Cómo hago para que las claves estén en la parte superior (como lo estarían los nombres de las columnas) y los valores que las siguen?

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

Suponiendo que desea que la source sea una matriz de matrices (común para estructuras similares a tablas), obtenga las claves una vez, luego agregue cada matriz de filas asignando las propiedades del objeto a la clave para ese índice:

 const keys = Object.keys(source[0]); const result = [keys, ...source.map(obj => keys.map(key => obj[key]))];

Ejemplo en vivo:

 const source = [{ day: 1, deliveries: 16, hours: 9 }, { day: 2, deliveries: 19, hours: 11 }]; const keys = Object.keys(source[0]); const result = [keys, ...source.map(obj => keys.map(key => obj[key]))]; console.log(result);
 .as-console-wrapper { max-height: 100% !important; }

Tenga en cuenta que esto supone un par de cosas:

  1. La matriz de source siempre tiene al menos un objeto en ella.
  2. Todos los objetos en la matriz de source tienen el mismo conjunto de propiedades.
  3. Desea que las claves estén en el orden en que aparecen en el primer objeto de la matriz. (Las propiedades de los objetos de JavaScript ahora tienen un orden definido, pero usar ese orden casi nunca es una buena idea, por lo que es posible que desee realizar algún tipo de operación de sort en las keys ).
about 4 years ago · Juan Pablo Isaza Denunciar

0

Ya casi has llegado. Simplemente use [0] para obtener el primer elemento para obtener solo claves. Y luego combine la matriz usando ... .

 let source = [{ day: 1, deliveries: 16, hours: 9 }, { day: 2, deliveries: 19, hours: 11 }] let ansArray = Object.keys(source[0]); let datatable = source.map(d => Array.from(Object.values(d))) let combined = [ansArray,...datatable]; console.log(combined);

about 4 years ago · Juan Pablo Isaza Denunciar

0

Array.from(Object.keys(d)) y Array.from(Object.values(d)) devolverán los datos incorrectos si el orden de propiedad es incorrecto.

 const source = [{ day: 1, deliveries: 16, hours: 9 }, { day: 2, deliveries: 19, hours: 11 }] const datatable = source.reduce((acc, item, index) => { if (index == 0) { acc.push(Object.keys(item)); } const newRow = acc[0].reduce((rowAcc, prop) => { rowAcc.push(item[prop]); return rowAcc; }, []); acc.push(newRow); return acc; }, []) console.log(datatable);

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda