如何將 fetch api 中的數據呈現到 javscript 中的表中

Question

我試圖創建一個這樣的表

<table class="table">
                <thead>
                  <tr>
                    <th scope="col">TokenSymbol</th>
                    <th scope="col">Address</th>
                    <th scope="col">Balance</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td id="symbol"></td>
                    <td id="address"></td>
                    <td id="balance"></td>
                  </tr>
                  
                </tbody>
              </table>

我想用來自我的 api 調用的數據填充表格。

我得到的數據是這樣的：

TOAD 0.00084138
chart.js:84 1 0.9
chart.js:84 CWJ 0
chart.js:84 CYN 0
chart.js:84 MOONSTAR 1395658765.4499083
chart.js:84 EMT 0
chart.js:84 DODO 0.06632153
chart.js:84 CWJ 0
chart.js:84 CLIPS 0
chart.js:84 SYRUP 0
chart.js:84 bCORGI 391.66319725
chart.js:84 MONEY 22989070.87819258
chart.js:84 SAFEFAIRMOON 207933.87278968
chart.js:84 1 1
chart.js:84 Cake-LP 0
chart.js:84 Cake 0
chart.js:84 DEFLAX 19304224871.809647
chart.js:84 ORFANO 1360077933.9251838
chart.js:84 BAKE 100
chart.js:84 Long 1.1219391

這是我用來獲取這些數據的代碼：

fetch(url,opts)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      const newdata = data;
      const balances = newdata['data']['ethereum']['address'][0];
      
      const symbol = balances['balances'][0]['currency'];
      const value = balances['balances'][0]['value'];
      const bal = balances['balances'];
     // console.log(symbol, value);
      //document.getElementById("tokenBalance").innerHTML = symbol.symbol + "," + symbol.address + "," + value;
    //console.log(bal);
    for(k in bal) { 
        console.log(bal[k].currency.symbol, bal[k].value,bal[k].currency.address); 
        //console.log(bal[k].currency);
        //document.getElementById('symbol').innerHTML = bal[k].currency.address;
        //document.getElementById('address').innerHTML = bal[k].currency.address;
        //document.getElementById('balance').innerHTML = bal[k].value;
    }
      
    });

我基本上想用我上面發布的數據創建一個靈活的表格，這些數據可能會有所不同，所以有時表格會有 5 行，有時有 10 行，具體取決於誰調用 function。 所以桌子必須適應這一點。

我如何用 bootstrap 和 javscript 解決這個問題？

Answer 1

您應該創建一個新的 HTML 元素，在您的情況下為一行，並將 append 它添加到您要使用的表中。 每個新行都將使用您要顯示的數據創建，這將取決於您的功能是動態的。

要么像var element = document.createElement(tagName[, options]);

或者您可以只使用 document.getElementById('yourTable').append(newRow) ，其中 newRow 是您使用所需數據偽造的新 HTML 元素。