如何在 html table 中显示来自 API 的 JSON 数据
How to display JSON data from API in html table
我正在尝试创建一个网页,当单击按钮时,该网页会在 html table 中显示来自 json API 的搜索结果.我曾尝试搜索相关建议,但大多数在线示例显示的示例中 json 数据位于非动态的单独文件中,而不是位于动态 API 数据库位置中。我应该向此代码添加什么以在 html table 中显示数据(当前以 json 形式显示)?我尝试了很多方法(并从这段代码中删除了它们)但没有任何效果。
到目前为止,这是我的代码:
$(document).ready(function() {
$('#option-droup-demo').multiselect({
enableClickableOptGroups: true
});
});
$(document).ready(function() {
$("button").click(function() {
$("#output").load("https://api.finna.fi/v1/search?lookfor=sibelius&limit=3");
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div class="jumbotron text-center">
<h1>Search from libray API database!</h1>
<p>Search for books, cs's and other stuff.</p>
</div>
<div class="container">
<div class="example">
</div>
</div>
</div>
<form>
<div class="formClass">
<div id="output">
<h2>Click button to load new content inside DIV box</h2>
</div>
<button type="button">Click to Load Content</button>
<table>
<thead>
<tr>
<th>Title</th>
<th>Name of the book</th>
<th>Subjects</th>
</tr>
</thead>
<tbody>
<tr>
<td>data from api</td>
<td>data from api</td>
<td>data from api</td>
</tr>
</tbody>
</table>
</div>
</form>
我建议你使用 axios - https://www.npmjs.com/package/axios 通过调用你的函数使其成为 async-await
这是一个开始
$(document).ready(function() {
const $output = $("#output");
$("button").click(function() {
$.get("https://api.finna.fi/v1/search?lookfor=sibelius&limit=3", function(data) {
// console.log(data)
$output.html(
data.records.map(item => `<tr><td>${item.title}</td><td>${item.buildings[0].translated}</td><td>...</td></tr>`)
);
});
});
});
tr th {
text-align: center;
padding: 10px;
border:1px solid black;
}
tr td {
padding: 10px;
border:1px solid black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="jumbotron text-center">
<h1>Search library API database!</h1>
<p>Search for books, cd's and other stuff.</p>
</div>
<div class="container">
<div class="example">
</div>
</div>
</div>
<form>
<div class="formClass">
<div>
<h2>Click button to load new content inside DIV box</h2>
</div>
<button type="button">Click to Load Content</button>
<table>
<thead>
<tr>
<th>Title</th>
<th>Name of the book</th>
<th>Subjects</th>
</tr>
</thead>
<tbody id="output">
</tbody>
</table>
</div>
</form>
我正在尝试创建一个网页,当单击按钮时,该网页会在 html table 中显示来自 json API 的搜索结果.我曾尝试搜索相关建议,但大多数在线示例显示的示例中 json 数据位于非动态的单独文件中,而不是位于动态 API 数据库位置中。我应该向此代码添加什么以在 html table 中显示数据(当前以 json 形式显示)?我尝试了很多方法(并从这段代码中删除了它们)但没有任何效果。
到目前为止,这是我的代码:
$(document).ready(function() {
$('#option-droup-demo').multiselect({
enableClickableOptGroups: true
});
});
$(document).ready(function() {
$("button").click(function() {
$("#output").load("https://api.finna.fi/v1/search?lookfor=sibelius&limit=3");
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div class="jumbotron text-center">
<h1>Search from libray API database!</h1>
<p>Search for books, cs's and other stuff.</p>
</div>
<div class="container">
<div class="example">
</div>
</div>
</div>
<form>
<div class="formClass">
<div id="output">
<h2>Click button to load new content inside DIV box</h2>
</div>
<button type="button">Click to Load Content</button>
<table>
<thead>
<tr>
<th>Title</th>
<th>Name of the book</th>
<th>Subjects</th>
</tr>
</thead>
<tbody>
<tr>
<td>data from api</td>
<td>data from api</td>
<td>data from api</td>
</tr>
</tbody>
</table>
</div>
</form>
我建议你使用 axios - https://www.npmjs.com/package/axios 通过调用你的函数使其成为 async-await
这是一个开始
$(document).ready(function() {
const $output = $("#output");
$("button").click(function() {
$.get("https://api.finna.fi/v1/search?lookfor=sibelius&limit=3", function(data) {
// console.log(data)
$output.html(
data.records.map(item => `<tr><td>${item.title}</td><td>${item.buildings[0].translated}</td><td>...</td></tr>`)
);
});
});
});
tr th {
text-align: center;
padding: 10px;
border:1px solid black;
}
tr td {
padding: 10px;
border:1px solid black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="jumbotron text-center">
<h1>Search library API database!</h1>
<p>Search for books, cd's and other stuff.</p>
</div>
<div class="container">
<div class="example">
</div>
</div>
</div>
<form>
<div class="formClass">
<div>
<h2>Click button to load new content inside DIV box</h2>
</div>
<button type="button">Click to Load Content</button>
<table>
<thead>
<tr>
<th>Title</th>
<th>Name of the book</th>
<th>Subjects</th>
</tr>
</thead>
<tbody id="output">
</tbody>
</table>
</div>
</form>