试图用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>

我能用Java语言做的最好的事情是:

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

      $('#table-body').append('<tr> ');
      $('#table-body').append('<td> ' + donnees.id + '</td>'); 
      $('#table-body').append('<td> ' + donnees.date + '</td>'); 
      $('#table-body').append('<td> ' + donnees.name + '</td>'); 
      $('#table-body').append('<td> ' + donnees.tag + '</td>');  
      $('#table-body').append('<td> ' + donnees.length + '</td>'); 
      $('#table-body').append('<td> ' + donnees.icon + '</td>');
      $('#table-body').append('</tr> '); 

      console.log(donnees);
    }); 

我想我仍然需要为json文件的每个对象添加一个迭代,一个初始化一个空数组

var row =[];
for (i=0; i<=donnees.length; i++);

但是我不知道该怎么做...

谢谢你的帮助 :)

评论