Actualmente estoy en el proceso de crear una tabla que muestre los valores de las variables. Tengo problemas para implementar los valores en mi tabla. Adjunto el código que tengo hasta ahora. Cuando ejecuto este código, obtengo "indefinido" en lugar de los valores. Cualquier ayuda sería apreciada.
<script> var outputHTML = ""; var countries = { "US": "Washington DC", "UK": "London", "Germany" : "Berlin", "Estonia": "Tallinn", "Morocco": "Rabat", "Niger": "Niamey" }; outputHTML += "<table border='2px' width='400'>"; for (var i =1; i <=6; i++) { outputHTML += "<tr>"; for (var j =1; j <=2; j++) { outputHTML += "<td>" + countries[i] + "</td>"; } outputHTML +="</tr>"; } outputHTML += "</table>"; document.getElementById("output").innerHTML = outputHTML; </script>Utilice Object.entries(countries) para convertir el objeto en una matriz bidimensional.
var outputHTML = ""; var countries = { "US": "Washington DC", "UK": "London", "Germany" : "Berlin", "Estonia": "Tallinn", "Morocco": "Rabat", "Niger": "Niamey" }; outputHTML += "<table border='2px' width='400'>"; //REM: Returns the key/value of the object as array[[key, value]] let tValues = Object.entries(countries); //REM: Note - use .length instead of static 6 or foreach //for (var i =1; i <=6; i++) { tValues.forEach((item) => { outputHTML += "<tr>"; //REM: We know item has two entries, so we can omit this loop. //for(var j =0; j <=1; j++) { // outputHTML += "<td>" + item[j] + "</td>"; //} outputHTML += "<td>" + item[0] + "</td>"; outputHTML += "<td>" + item[1] + "</td>"; outputHTML +="</tr>"; }) outputHTML += "</table>"; document.getElementById("output").innerHTML = outputHTML; <div id="output"></div>Tener países como un objeto como el que has mostrado es inusual y puede que no sea lo que quieres.
Es más común tener una matriz de objetos como este.
var countries = [ { country: 'US', city: 'Washington DC' }, { country: 'UK', city: 'London' }, // etc ];y luego accedería a ellos como esta nota de que el primer elemento de una matriz es 0
for (let i = 0; i < countries.length; i++) { outputHTML += '<tr><td>' + countries[i].country + '</td>' + <td>' + countries[i].city + '</td></tr>'; }use Object.keys(countries).forEach( key => // for loop here ) en lugar de for loop, y la clave será el nombre de prop.
es decir, en el ciclo forEach los countries[key] obtendrán el valor, mientras que la key obtendrá la variable.