Bootstrap 如何在javscript中将数据从fetch API呈现到表中

gk7wooem 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(2)|浏览(142)

我正在尝试创建一个这样的表

<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行取决于谁调用的功能。所以table必须适应这个。
如何使用bootstrap和javscript解决这个问题？

twitter-bootstrap

来源：https://stackoverflow.com/questions/67303297/how-to-render-data-from-fetch-api-into-a-table-in-javscript

2条答案

按热度按时间

dba5bblo1#

您应该创建一个新的HTML元素，在您的情况下是一行，并将其附加到您想要使用的表中。每个新行都将使用您想要显示的数据创建，并且根据您的函数，这将是动态的。
或者像var element = document.createElement(tagName[, options]);
或者你也可以使用document.getElementById（'yourTable '）.append（newRow），其中newRow是一个新的HTML元素，由你用你想要的数据伪造。

赞(0）回复(0）举报 2023-09-28

5jdjgkvh2#

您一直在使用该数据对象。但是如果你检查控制台，你的数组就在www.example.com里面data.data，所以你需要使用data.data来像这样迭代数组。

fetch("http://dummy.restapiexample.com/api/v1/employees").then(
  res => {
    res.json().then(
      data => {
        console.log(data.data);
        if (data.data.length > 0) {

          var temp = "";
          data.data.forEach((itemData) => {
            temp += "<tr>";
            temp += "<td>" + itemData.id + "</td>";
            temp += "<td>" + itemData.employee_name + "</td>";
            temp += "<td>" + itemData.employee_salary + "</td></tr>";
          });
          document.getElementById('data').innerHTML = temp;
        }
      }
    )
  }
)

   <div class="container">
    <table class="table">
      <thead>
      <tr>
        <th>ID</th>
        <th>Employee Name</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody id="data">

    </tbody>
  </table>
</div>

赞(0）回复(0）举报 2023-09-28

我来回答

Bootstrap 如何在javscript中将数据从fetch API呈现到表中

2条答案

相关问题

热门标签

最新问答