Hola a todos, tengo una serie de objetos, ahora esos objetos tienen varias claves y esas claves son dinámicas, por lo que no tengo idea de cómo puedo recorrer los datos y mostrarlos en la tabla. No estoy seguro de cómo puedo acceder a ellos cuando hago un recorrido. . Pude obtener las claves de objeto en una matriz separada, pero no sé cómo utilizarlas. Aquí está la matriz de datos y la matriz de claves, ¿alguien puede guiarme o ayudarme?
Esta es la matriz de datos
var data = { "data": [ { "nationality": "Indonesia", "gender": "Male", "country": "Indonesia", "preferred_role": "Customer Service", "work_experience": "More than 1 year and less than 2 years", "preferred_work_environment": "Open to both", "count": 381 }, ] }Esta es la matriz de claves
["nationality", "gender","country","preferred_role","work_experience","count","preferred_work_environment"]Este es un ejemplo simple de cómo itera las propiedades del objeto:
var data = { "data": [{ "nationality": "Indonesia", "gender": "Male", "country": "Indonesia", "preferred_role": "Customer Service", "work_experience": "More than 1 year and less than 2 years", "preferred_work_environment": "Open to both", "count": 381 }, ] }; for (let i in data.data[0]) { console.log(i); }Para más detalles, puedes leer:
Al usar object.entries, puede obtener la clave y los valores de un objeto.
for (const [key, value] of Object.entries(data.data[0])) { console.log(`${key}: ${value}`); }Con este método, obtendrá una serie de claves para que pueda usarlas
Object.keys(data.data[0])Con este método obtendrá valores de un objeto.
Object.values(data.data[0])Aquí hay un fragmento que le permite enumerar todos los pares clave/valor de todos los objetos contenidos en una matriz de datos:
const data = {"data": [{ "nationality": "Indonesia", "gender": "Male", "country": "Indonesia", "preferred_role": "Customer Service", "work_experience": "More than 1 year and less than 2 years", "preferred_work_environment": "Open to both", "count": 381 },{ "nationality": "German", "gender": "Female", "country": "France", "passion": "coding", "preferred_role": "Support", "work_experience": "More than 20 years", "preferred_work_environment": "virtual", "count": 524 } ] }; document.querySelector("table").innerHTML = data.data.map(ob=> "<tr><td><table>" +Object.entries(ob).map(el=>`<tr><td class="rgt">${el.join(":</td><td>")}</td></tr>`).join("") +"</table></td></tr>").join(""); .border > tbody > tr > td { border: solid 1px grey } .rgt { text-align: right } <table class="border"></table>