试图用 json 填充一个 html 表答案

【问题标题】：Trying to fill a html table with json试图用 json 填充一个 html 表
【发布时间】：2020-09-10 16:08:15
【问题描述】：

我为这个愚蠢的问题道歉，我是一个初学者，对 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);
 });

 });

 });

感谢您的帮助:)

【问题讨论】：

嗨，看看这个插件。 datatables.net

标签： javascript json html-table

【解决方案1】：

您可以在 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);
  });

});

【讨论】：

我试过了，但有一个错误消息：“未捕获的类型错误：无法使用 'in' 运算符成功搜索 'length'” ...
这可能是因为 $.each 正在尝试迭代字符串。您需要在迭代之前解析 JSON。我更新了我的答案。
我已经尝试过了，但是有一个错误消息：“Uncaught SyntaxError: Unexpected token s in JSON at position 0”
好的。删除该行并尝试将这个$.each(donnees,更改为他的$.each(donnees.donnees,
是的！我只是稍微改变了你告诉我的内容：$each(i.donnees)，它起作用了！谢谢 :) 我会编辑我的代码。

【解决方案2】：

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

例如： donnees.forEach((row) => ... // Append a row to the table )

【讨论】：

【解决方案3】：

更新：你试过了吗？

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

     });
  });

【讨论】：