HTML - 将 json 转换为表格答案

【问题标题】：HTML - Convert json to tableHTML - 将 json 转换为表格
【发布时间】：2020-05-09 03:22:39
【问题描述】：

我正在尝试将 JSON 转换为表格，但它没有。一切似乎都很好，但我看不到表中的值。

我将 JSON 转换为表格的代码：

    $(function() {
          var my_data = '';
          $.each(JSON.parse(sonuc.response) , function(key, item){
          my_data += '<tr>';
          my_data += '<td>'+item.kod+'</td>';
          my_data += '<td>'+item.ev + " - " + item.deplasman+'</td>';
          my_data += '<td>'+item.oran+'</td>';
          my_data += '<td>'+item.tahmin+'</td>';
          my_data += '<td>'+item.tur+'</td>';
          my_data += '<td>'+item.tarih+'</td>';
          my_data += '<td>'+item.tarih+'</td>';
          my_data += '</tr>';
          });
         console.log(my_data)
         $('#maclar_table').append(my_data);    
  });

my_data 输出：

<tr><td>213</td><td>Galatasaray - Fenerbahçe</td><td>3.2</td><td>MS2</td><td>free</td><td>22.03.2019 / 18:00</td><td>22.03.2019 / 18:00</td></tr><tr><td>213</td><td>Galatasaray - Fenerbahçe</td><td>3.2</td><td>MS2</td><td>free</td><td>22.03.2019 / 18:00</td><td>22.03.2019 / 18:00</td></tr><tr><td>213</td><td>Galatasaray - Fenerbahçe</td><td>3.2</td><td>MS2</td><td>free</td><td>22.03.2019 / 18:00</td><td>22.03.2019 / 18:00</td></tr><tr><td>213</td><td>Galatasaray - Fenerbahçe</td><td>3.2</td><td>MS2</td><td>free</td><td>22.03.2019 / 18:00</td><td>22.03.2019 / 18:00</td></tr><tr><td>213</td><td>Galatasaray - Fenerbahçe</td><td>3.2</td><td>MS2</td><td>free</td><td>22.03.2019 / 18:00</td><td>22.03.2019 / 18:00</td></tr>

我的 JSON 输出：

我的表格 HTML 代码：

         <table class="table" name="maclar_table">
                <thead class=" text-primary">
                  <th>
                    Kod
                  </th>
                  <th>
                    Takımlar
                  </th>
                  <th>
                    Oran
                  </th>
                  <th>
                    Tahmin              
                  </th>
                  <th>
                    Tür
                  </th>
                   <th>
                    Tarih
                  </th>

                  <th>
                    Yetkiler
                  </th>
                </thead>
              </table>

【问题讨论】：

JSON 是文本格式；你有一个对象数组。

标签： javascript jquery html json ajax

【解决方案1】：

你可以使用-https://www.npmjs.com/package/html-tablify

就这么简单-

var html_tablify = require('html-tablify');
var options = {
    data: [{a: 1, b: 2}, {b: 1, a: 2}, {a: 4}]
};
var html_data = html_tablify.tablify(options);
console.log(html_data);

输出（漂亮）-

<table border=1 cellspacing=0 cellpadding=0>
    <thead>
        <tr> <th>a</th> <th>b</th> </tr>
    </thead>
    </tbody>
        <tr> <td>1</td> <td>2</td> </tr>
        <tr> <td>2</td> <td>1</td> </tr>
        <tr> <td>4</td> <td> </td> </tr>
    </tbody>
</table>

【讨论】：

【解决方案2】：

您将名称设置为 maclar_table，而不是 id。 jQuery 中的 $("#maclar_table") 获取 ID 为 maclar_table 的元素，而不是名称。我对表格第 1 行代码的建议：

<table class="table" name="maclar_table" id="maclar_table">

这应该可以完成工作。

【讨论】：