0

estos son los datos que deseo agregar a la tabla

var etnias =[
             {departamento : "Raccs", ciudad:"Bluefiels", etnia: "Mestizos"},
             {departamento : "Raccs", ciudad:"Laguna de perlas", etnia: "Creolle"},
             {departamento : "Raccs", ciudad:"El Rama", etnia: "Mestizos"},
             {departamento : "Raccs", ciudad:"Bilwi", etnia: "Miskito"}
             ];



for(var i =0; i<= etnias.length-1; i++)
{




    //console.log(etnias[i].departamento);
}


console.log(etnias);

como ven hasta ahi quede la otra forma fue en el index.html

# Departamento Ciudad/Comunidad Etnia
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Raccs</td>
        <td>Bluefields</td>
        <td>Meztisos</td>
    </tr>
</tbody>

que ahi si me sale pero en el javascript me pueden ayudar porfa.

1
  • 1
    Por favor redacta títulos objetivos, lee Cómo preguntar
    – user128299
    el 20 oct. 2020 a las 23:03

2 respuestas 2

0

una solución a este problema es usando los métodos InsertRow y InsertCell, estos se encargaran de insertar los nodos de el elemento TBODY

Para la lectura de array de objetos, se esta usando un bucle, hay otras funciones que lo pueden minimizar. Por otro lado, momento de ubicarme en un objeto, lo he tenido que convertir en un array, para ello use el método entries de la clase Object, dando este tres array con dos valores, el primero con el nombre clave del objeto y el segundo el valor de este, en cada uno. Mi idea era integrar un tag Name a cada elemento td y que tenga como valor la palabra clave:

<tr>
<td name="departamento"></td>
<td name="ciudad"></td>
<td name="etnia"></td>

Pero eso ya te lo dejo de tarea.

 var etnias = [
      { departamento: "Raccs", ciudad: "Bluefiels", etnia: "Mestizos" },
      { departamento: "Raccs", ciudad: "Laguna de perlas", etnia: "Creolle" },
      { departamento: "Raccs", ciudad: "El Rama", etnia: "Mestizos" },
      { departamento: "Raccs", ciudad: "Bilwi", etnia: "Miskito" },
    ];

    const tabla = document
      .querySelector("#tablita")
      .getElementsByTagName("tbody")[0];


    for (let i = 0; i < etnias.length; i++) {
       let z = tabla.insertRow(i).insertCell(0);
      let items = Object.entries(etnias[i])
      items.map((x)=>{
        let td = document.createElement("td")
        td.innerHTML = x[1]
        z.appendChild(td);
      })
    }
 <table id="tablita">
          <tbody>
           
            
          </tbody>
        </table>
     

Te recomiendo leer la documentación:

0

1.- Si lo que deseas es crear una tabla con los datos que se encuentran en etnias lo recomendable es recorrer este arreglo y cada vez que lo recorras crear un template literal e insertarlos en el tbody.

2.- El codigo quedaria de esta manera:

var etnias = [
  { departamento: "Raccs", ciudad: "Bluefiels", etnia: "Mestizos" },
  { departamento: "Raccs", ciudad: "Laguna de perlas", etnia: "Creolle" },
  { departamento: "Raccs", ciudad: "El Rama", etnia: "Mestizos" },
  { departamento: "Raccs", ciudad: "Bilwi", etnia: "Miskito" },
];

Recorremos etnias y creamos el template literal por cada elemento recorrido

etnias.forEach((element) => {

 //ACCEDEMOS AL TBODY DE TU TABLA Y LE INSERTAMOS UN NUEVO TR

  document.querySelector("table tbody").innerHTML += `<tr>
          <td>1</td>
          <td>${element.departamento}</td>
          <td>${element.ciudad}</td>
          <td>${element.etnia}</td>
        </tr>`;
});

var etnias = [
  { departamento: "Raccs", ciudad: "Bluefiels", etnia: "Mestizos" },
  { departamento: "Raccs", ciudad: "Laguna de perlas", etnia: "Creolle" },
  { departamento: "Raccs", ciudad: "El Rama", etnia: "Mestizos" },
  { departamento: "Raccs", ciudad: "Bilwi", etnia: "Miskito" },
];

//CONTROLAS EL INCREMENTO DE CADA ITEM
let contador = 1;

etnias.forEach((element) => {
  document.querySelector("table tbody").innerHTML += `<tr>
          <td>${contador++}</td>
          <td>${element.departamento}</td>
          <td>${element.ciudad}</td>
          <td>${element.etnia}</td>
        </tr>`;
});
<table>
   <tbody ></tbody>
 </table>

Leer mas sobre template literals:

plantillas de cadenas

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.