从 API 获取数据后，如何在 HTML 表格中显示 api 数据答案

【问题标题】：After geting data from API , How to display api data in HTML table从 API 获取数据后，如何在 HTML 表格中显示 api 数据
【发布时间】：2022-01-23 02:53:54
【问题描述】：

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

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"
}]

如何将数据显示到 HTML 表格中

【问题讨论】：

标签： javascript html json api fetch

【解决方案1】：

在 js 中使用不同的 Object 方法，例如 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>

【讨论】：

@hari prasath 在获取数据后，您可以使用相同的逻辑......它会正常工作！
非常感谢，如何通过 url 获取 json 数据并提取到 HTML 表中
@hari prasath 您可以使用 fetch 请求，在 fetch 请求完成后您可以使用点 (.) 然后方法 [记住它的承诺] ...然后就可以了。另一种方法是使用现代 async / await 方法！