Home How do i display this data on my HTML it comes back as being undefined on my table

Questions

How do i display this data on my HTML it comes back as being undefined on my table

January 6, 2022

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)
})

How would i display this to my HTML it comes back on my HTML as undefined what am i missing. I’m new to javascript so trying to understand.

>Solution :

You have some mistakes in your code. i fixed that it would be work and you see that it push strings in your table. the rest is homework for you 😉

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) => {
    var cryptoCoin = "x"
    let table = document.querySelector('table');
    let keys = Object.keys(completeData)

    for (var i=0; i < keys.length; i++) {
      
      let tr = document.createElement('tr');
      tr.innerHTML = keys[i] + '|' +JSON.stringify(completeData[keys[i]]);
      table.appendChild(tr)
      
      //completeData.forEach(completeData[i]) 
       // console.log('xxx', JSON.stringify(cryptoCoin))
        // 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)
})