Ajax - json, не удается создать таблицу - PullRequest
Новая
       8

Ajax - json, не удается создать таблицу

1 голос
/ 17 апреля 2020

Попытка получить данные из 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(). Не могу понять, почему.

1 Ответ

1 голос
/ 17 апреля 2020

data это не array это object, поэтому нужно получить все keys из object

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>
...