如何将 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 元素。