Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

166
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda