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

{
“唐尼”：[
{
“id”：1，
“日期”：“2020年1月1日”，
“name”：“P–ques”，
“标签”：“Fête”，
“长”：“5分钟”，
“图标”：”
},
{
“id”：2，
“日期”：“2020年10月1日”，
“姓名”：“周年纪念日”，
“标签”：“Fête”，
“长”：“21分钟”，
“图标”：”
},
{
“id”：3，
“日期”：“2020年3月1日”，
“名称”：“配置”，
“标签”：“阵痛”，
“长”：“56分钟”，
“图标”：”
}
]}

我想像这样填充一个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);
 });

 });

 });

$（文档）.ready（函数（）{
$.getJSON（'json/bdd.json'，函数（i，donnees）{
$.each（i.donnees，函数（索引，元素）{
让行=(`
${element.id}
${element.date}
${element.name}
${element.tag}
${element.long}
${element.icon}
`);
$（'#表体'）。追加（行）；
});
});
});

---

感谢您的帮助：）

您可以使用getJSON回调中的

$.each（）

填充表

$.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);
  });

});

$.getJSON（'json/bdd.json'，函数（i，donnees）{
//添加这一行
donnees=JSON.parse（donnees）；
$.each（donnees，函数（索引，元素）{
让row=jQuery(`
${element.id}
${element.date}
${element.name}
${element.tag}
${element.length}
${element.icon}
`);
$（'#表体'）。追加（行）；
});
});

是的，您确实需要在对象数组中循环。 我个人的偏好是forEach循环

例如：

---

donnees.forEach（（row）=>…//在表中追加一行）

更新：您尝试过这个吗

  $( document ).ready(function() {
     $.getJSON('json/bdd.json', function(i, donnees) { 

        $.each(i, function (index, element) {
            var 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').prepend(row);
        });

     });
  });

$（文档）.ready（函数（）{
$.getJSON（'json/bdd.json'，函数（i，donnees）{
$.each（i，函数（索引，元素）{
变量行=“”+
''+元素。id+''+
''+元素。日期+''+
''+元素。名称+''+
''+元素。标记+''+
''+元素。长+''+
''+元素。图标+''+
'';
$（“#表体”）。前置（行）；
});
});
});

您好，请查看此插件。我试过了，但出现了一条错误消息：“uncaughttypeerror:无法使用'in'运算符在success中搜索'length'”…这可能是因为$。每个人都试图迭代一个字符串。您需要在迭代之前解析JSON。我更新了我的答案。我已经尝试过了，但出现了一条错误消息：“未捕获的SyntaxError:JSON中位置0处的意外标记s”Ok。删除该行并尝试更改此

$。each（donnees，

为他的

$。each（donnees.donnees，

是的！我只是更改了一点您告诉我的内容：$each（I.donnees），并且成功了！谢谢：）我将编辑我的代码。