从 API 获取数据后，如何在 HTML 表格中显示 api 数据
Posted
技术标签:
【中文标题】从 API 获取数据后，如何在 HTML 表格中显示 api 数据【英文标题】：After geting data from API , How to display api data in HTML table 【发布时间】：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 表格中
【问题讨论】：
【参考方案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 方法！以上是关于从 API 获取数据后，如何在 HTML 表格中显示 api 数据的主要内容，如果未能解决你的问题，请参考以下文章
如何从API调用中选择单个JavaScript对象/ JSON项目
Swift 5：给定的数据不是有效的JSON（将数据从API加载到表格视图）