javascript - 试图用 json 填充一个 html 表
问题描述
我为这个愚蠢的问题道歉,我是一个初学者,对 Javascript、jQuery、Ajax 的混合感到很困惑......
我有一个 json 文件,位于 json/bdd.json :
{
"donnees" : [
{
"id": 1,
"date": "01/01/2020",
"name": "Pâques",
"tag": "Fête",
"long": "5min",
"icon":"<i class='fab fa-itunes-note'>"
},
{
"id": 2,
"date": "01/10/2020",
"name": "Anniversaire",
"tag": "Fête",
"long": "21min",
"icon":"<i class='fab fa-itunes-note'>"
},
{
"id": 3,
"date": "01/03/2020",
"name": "Conférence",
"tag": "Travail",
"long": "56min",
"icon":"<i class='far fa-file-alt'></i>"
}
]}
我想像这样填写一个 html 表:
<table class="table">
<thead class="black white-text">
<tr>
<th scope="col">#</th>
<th scope="col">Date</th>
<th scope="col">Nom</th>
<th scope="col">Tag</th>
<th scope="col">durée</th>
<th scope="col"><i class="fab fa-itunes-note"></i> / <i class="far fa-file-alt"></i></th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
编辑:问题已解决,它适用于当前代码:
$( document ).ready(function() {
$.getJSON('json/bdd.json', function(i, donnees) {
$.each(i.donnees, function (index, element) {
let row = (`<tr>
<td scope="col">${element.id}</td>
<td scope="col">${element.date}</td>
<td scope="col">${element.name}</td>
<td scope="col">${element.tag}</td>
<td scope="col">${element.long}</td>
<td scope="col">${element.icon}</td>
</tr>`);
$('#table-body').append(row);
});
});
});
谢谢你的帮助 :)
解决方案
$.each()
您可以使用内部 getJSON 回调填充您的表格。
$.getJSON('json/bdd.json', function(i, donnees) {
// Add this line
donnees = JSON.parse(donnees);
$.each(donnees, function(index, element) {
let row = jQuery(`<tr>
<th scope="col">${element.id}</th>
<th scope="col">${element.date}</th>
<th scope="col">${element.name}</th>
<th scope="col">${element.tag}</th>
<th scope="col">${element.length}</th>
<th scope="col">${element.icon}</th>
</tr>`);
$('#table-body').append(row);
});
});
推荐阅读
- python - 可以在图形的部分而不是整个 train_step 上使用 tf.distribute.Strategy.mirroredstrategy 用于 GAN 自定义训练脚本?
- java - 有没有办法搜索具有超过指定数量的构造函数的所有类?
- protobuf-net - 我们如何识别文件是否被 protobuf 序列化?
- azure - 不同资源组的 Azure VM 存储库
- javascript - 登录前发送验证电子邮件
- c++11 - 创建一个共享库并在另一个项目中使用它
- reactjs - 我收到未处理的拒绝(TypeError):err.response 在我的 React 应用程序中未定义
- php - php - 空格和制表符之间的单词(或:按字母顺序排序出勤报告)
- python - 我无法在 pyhtonanywhere 上部署我的聊天机器人,即使它在本地工作
- php - 使用 PHP 将每个 HTML 标记拆分为新行