从 API 获取数据后，如何在 HTML table 中显示 api 数据

Question

这是我使用 Fetch URL 方法调用 API 的代码，从 api 获取数据后如何将数据显示到 HTML table

index.html

 <body>
        <input type="text" name="daterange" value="" />
        <script>
            $(function () {
                $('input[name="daterange"]').daterangepicker({
                    opens: 'left'
                }, function (start, end, label) {
                    variable_one = "selected_date: " + start.format('YYYY-MM-DD');
                    console.log("Hai hari its working");
                    console.log(variable_one);
                    fetch("http://localhost:3000/09-12-2021")
                    .then(response => response.json())
                    .then(data => console.log(data));
                });
            });
            
        </script>
    
    </body>

db.json 这是我的示例 json 数据

[
{
"s.no": 1,
"date": "09-12-2021",
"time": "12am",
"videos": "video_01",
"button": "play"
}]

如何将数据显示成HTMLtable

Answer 1

在 js 中使用不同的对象方法，例如 Object.keys 和 Object.values ...您可以循环访问从数据数组中获取的对象的每个值或键！ ... 结合使用模板字符串和 DOM 操作的强大功能，您可以实现您想要的。

例子=>


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Table</title>
</head>
<body>
  <table border="1">
    <thead>
      <tr></tr>
    </thead>
    <tbody></tbody>
  </table>


  <script type="text/javascript" charset="utf-8">
    const thead = document.querySelector("table > thead > tr");
    const tbody = document.querySelector("table > tbody");
    let data = [{
      "s.no": 1,
      "date": "09-12-2021",
      "time": "12am",
      "videos": "video_01",
      "button": "play"
    }];
    
    Object.keys(data[0]).forEach(attr => {
      thead.innerHTML +=
      `<th>${attr}</th>`;
    });
    data.forEach(ele =>{
      let append = "";
      append += "<tr>";
      Object.values(ele).forEach(entry =>{
        append += `<td>${entry}</td>`;
      });
      append += "</tr>";
      tbody.innerHTML += append;
    });
  </script>
</body>
</html>

从 API 获取数据后，如何在 HTML table 中显示 api 数据

After geting data from API , How to display api data in HTML table

html

javascript

api

json

fetch