在引导程序表中传递JSON数据

Question

引导表未按预期工作。不从数据url获取数据。我已经传递了保存JSON数据的url。请建议如何解决这个问题。已经包含了下面的index.js，它从表组织中获取数据

app.get("/organizations", function(req, res) {
Organization.find({}, function(err, allOrganizations) {
if (err) {
console.log(err);
} else {
res.send(allOrganizations);
}
});
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data-toggle="table" data-url="/organizations">
<thead>
<tr>
<th data-sortable="true" data-field="name">Name</th>
<th data-field="location">Location</th>
<th data-field="contact">Contact</th>
</tr>
</thead>
</table>

Answer 1

您可以使用fetch将数据引入前端。然后显示如下：

//display the data
const displayData = (orgs) => {
//here you can get table by giving it id
//if its the only table, then you could
const table = document.getElementsByTagName('table')[0];
let res = '<tbody>'
orgs.map(org => {
res += '<tr>'
+ '<td>' + org.location + '</td>'
+ '<td>' + org.contact + '</td>'
+ '</tr>' 
})
res += '</tbody>'
table.innerHTML += res;
}
//fetch the data from the endpoint
const fetchData = async () => {
const url = 'http://localhost:3000/organizations' //here enter your app URL and port correctly
const res = await fetch(url)
const orgs = await res.json()
displayData(orgs)
}
window.onload = fetchData()