1

Estoy intentando imprimir un array con objetos dentro hacia una tabla en HTML, pero no puedo hacer que me vaya mostrando en cada celda los datos del array, sino el primer dato de cada objeto.

const corto = [

{
codigo:8324,
localidad:'Garupa',
tipo:'casa',
direccion:'eva peron 897',
descripcion:'4 habitaciones',
nuevaOvieja:'E',
ventaOalquiler:'V',
precio:5300
},
{
codigo:886543,
localidad:'San ignacio',
tipo:'duplex',
direccion:'Madariaga 4949',
descripcion:'2 habitaciones',
nuevaOvieja:'E',
ventaOalquiler:'A',
precio:6200
},
{
codigo:3212,
localidad:'Garupa',
tipo:'depto',
direccion:'Favaloro 8833',
descripcion:'monoambiente',
nuevaOvieja:'E',
ventaOalquiler:'V',
precio:25000
},
{
codigo:664,
localidad:'Posadas',
tipo:'casa',
direccion:'Messi 10',
descripcion:'3 habitaciones',
nuevaOvieja:'U',
ventaOalquiler:'A',
precio:5000
}
]

<body>
    <input type="button" value="Genera una tabla" onclick="genera_tabla()">
<script>

var titulos=["codigo","localidad","tipo","direccion","descripcion","Nueva (E) o Usada (U)","Venta o Alquiler","Precio"]
    var variables=[ "codigo","localidad","tipo","direccion","descripcion","nuevaOvieja","ventaOalquiler","precio"]
    

    function genera_tabla() {
  // Obtener la referencia del elemento body
  var body = document.getElementsByTagName("body")[0];

  // Crea un elemento <table> y un elemento <tbody>
  var tabla   = document.createElement("table");
  var tblBody = document.createElement("tbody");

  // Crea las celdas
  for (var i = 0; i < 1; i++) {
    // Crea las hileras de la tabla
    var hilera = document.createElement("tr");

    for (var j = 0; j < titulos.length; j++) {
      // Crea un elemento <td> y un nodo de texto, haz que el nodo de
      // texto sea el contenido de <td>, ubica el elemento <td> al final
      // de la hilera de la tabla
    //   var celda = document.createElement("td");
      var thead=document.createElement("th")
      var textoCelda = document.createTextNode(titulos[j]);
      thead.appendChild(textoCelda);
      hilera.appendChild(thead);
    }

    // agrega la hilera al final de la tabla (al final del elemento tblbody)
    tblBody.appendChild(hilera);
    
  }
  for (var i = 0; i < corto.length; i++) {
    // Crea las hileras de la tabla
    var hilera = document.createElement("tr");

    for (var j = 0; j < variables.length; j++) {
      // Crea un elemento <td> y un nodo de texto, haz que el nodo de
      // texto sea el contenido de <td>, ubica el elemento <td> al final
      // de la hilera de la tabla
    var celda = document.createElement("td");
      var thead=document.createElement("th")
      var textoCelda = document.createTextNode(corto[j].codigo);
      celda.appendChild(textoCelda);
      hilera.appendChild(celda);
    }

    // agrega la hilera al final de la tabla (al final del elemento tblbody)
    tblBody.appendChild(hilera);
    
  }
  // posiciona el <tbody> debajo del elemento <table>
  tabla.appendChild(tblBody);
  // appends <table> into <body>
  body.appendChild(tabla);
  // modifica el atributo "border" de la tabla y lo fija a "2";
  tabla.setAttribute("border", "2");

}
</script> 
</body>


Espero que puedan ayudarme, gracias de antemano

1 respuesta 1

0

1- La cabecera de la tabla va dentro de una etiqueta thead y no tbody.

2- Para llenar la tabla con los datos de corto.

 corto.forEach(x => {
  var hilera = document.createElement("tr");
  Object.values(x).forEach(y => {
         var celda = document.createElement("td");
         var textoCelda = document.createTextNode(y);
         celda.appendChild(textoCelda);
         hilera.appendChild(celda);
  })
  tblBody.appendChild(hilera);
})
tabla.appendChild(tblBody);
body.appendChild(tabla);
tabla.setAttribute("border", "2");
2
  • ese forEach va dentro de la funcion genera_tabla? Commented el 3 jun. 2022 a las 0:57
  • * Edit * ya me funciono, mil gracias sos un crack Commented el 3 jun. 2022 a las 1:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.