Ajax - json，无法创建表答案

【问题标题】：Ajax - json, failing to create tableAjax - json，无法创建表
【发布时间】：2020-07-31 08:51:02
【问题描述】：

试图从https://api.quarantine.country/api/v1/summary/latest 获取数据但是我的表没有建立。

我的 HTML 表格

<tr class="table"></tr>
    <th>Contry name</th>
    <th>Total infected</th>
    <th>Recovered</th>
</tr>
</thead>
<tbody id="myTable">
</tbody>

我的脚本

 <script>
        var myArray = []
        $.ajax({
            method: 'GET',
            url: 'https://api.quarantine.country/api/v1/summary/latest',
            success: function(response) {
                myArray = response.data.regions
                console.log(myArray)
                buildTable(myArray)              
            }
        })
        function buildTable(data) {
            var table = document.getElementById('myTable')
            for (var i = 0; i < data.length; i++) {
                var row = `<tr>
                            td${data[i].name}td
                            td${data[i].total_cases}td
                            td${data[i].recovered}td
                      </tr>`
                table.innerHTML += row
            }
        }
 </script>

我在控制台上获得了 data.regions，但我似乎无法使用 buildTable() 函数读取对象。不知道为什么。

【问题讨论】：

标签： javascript json ajax html-table

【解决方案1】：

data 不是array 它是object 所以需要获取object 的所有keys

var myArray = []
$.ajax({
    method: 'GET',
    url: 'https://api.quarantine.country/api/v1/summary/latest',
    success: function(response) {
        myArray = response.data.regions
       // console.log(myArray)
        buildTable(myArray)              
    }
})
function buildTable(data) {
    var table = document.getElementById('myTable');
    Object.keys(data).forEach(function (item) {
      var row = `<tr>
                 <td>${data[item].name}</td>
                 <td>${data[item].total_cases}</td>
                 <td>${data[item].recovered}</td>
              </tr>`
        table.innerHTML += row
     });
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr class="table">
      <th>Contry name</th>
      <th>Total infected</th>
      <th>Recovered</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

【讨论】：