fetch("https://api.coingecko.com/api/v3/simple/price?ids=Bitcoin%2Cdai%2Csolana&vs_currencies=usd&include_market_cap=true&include_24hr_vol=true") .then((data) => { console.log(data); return data.json(); }) .then((completeData) => { console.log(completeData) if(completeData.length > 0) { var cryptoCoin = "" } for (var i=0; i = completeData.length; i++) { completeData.forEach(completeData[i]) cryptoCoin += "<tr>" cryptoCoin += `<td> ${completeData.bitcoin} </td>`; cryptoCoin += `<td> ${completeData.usd_market_cap} </td>`; cryptoCoin += `<td> ${completeData.usd_24h_vol} </td>`; cryptoCoin += `<td> ${completeData.usd} </td>`; } document.getElementById("data").innerHTML = cryptoCoin; }) .catch ((err) => { console.log(err) })¿Cómo mostraría esto en mi HTML? Vuelve a mi HTML como indefinido. ¿Qué me estoy perdiendo? Soy nuevo en javascript, así que trato de entender.
Hay algunos problemas con su código.
En primer lugar, declara la variable cryptoCoin dentro del si y luego, cuando se cierra el corchete si, inicia su ciclo for. Debe tener la declaración de la variable dentro del mismo alcance o superior como se muestra a continuación.
En segundo lugar, no debe usar tanto el bucle for como el forEach que está usando actualmente de una manera completamente incorrecta.
En tercer lugar, debería ser menor que completeData.length no igual.
Finalmente, probablemente debería cerrar la fila de la tabla.
Debería verse más como esto:
if (completeData.length > 0) { var cryptoCoin = ""; for (var i=0; i < completeData.length; i++) { cryptoCoin += "<tr>"; cryptoCoin += `<td> ${completeData[i].bitcoin} </td>`; cryptoCoin += `<td> ${completeData[i].usd_market_cap} </td>`; cryptoCoin += `<td> ${completeData[i].usd_24h_vol} </td>`; cryptoCoin += `<td> ${completeData[i].usd} </td>`; cryptoCoin += "</tr>"; } document.getElementById("data").innerHTML = cryptoCoin; }Tienes algunos errores en tu código. arreglé que funcionaría y ves que empuja cadenas en tu tabla. el resto es tarea para ti ;-)
fetch("https://api.coingecko.com/api/v3/simple/price?ids=Bitcoin%2Cdai%2Csolana&vs_currencies=usd&include_market_cap=true&include_24hr_vol=true") .then((data) => { return data.json(); }) .then((completeData) => { let table = document.querySelector('table'); let keys = Object.keys(completeData) console.log(keys) for (var i=0; i < keys.length; i++) { let usd = completeData[keys[i]].usd; let usd_market_cap = completeData[keys[i]].usd_market_cap let usd_24h_vol = completeData[keys[i]].usd_24h_vol let row = `<td> ${usd} </td> <td> ${usd_market_cap} </td> <td> ${usd_24h_vol} </td>`; let tr = document.createElement('tr'); tr.innerHTML = row table.appendChild(tr) } }) .catch ((err) => { console.log(err) }) <table border="1" id="data"> <th>1</th> <th>2</th> <th>3</th> </table>