Как заполнить HTML таблицу с результатом аа запроса AJAX

Question

У меня есть следующий HTML-таблица, в которой я хочу, чтобы заполнить с результатом Ajax запроса: таблицы t_extension

<table id="t_extension" class="table table-striped"> 
    <thead> 
      <tr> 
       <th>Extension</th> 
       <th>Name</th> 
       <th>Action</th> 
      </tr> 
    </thead> 
    </table> 

и я называю апи с помощью AJAX

$.ajax(
    { 
     type: "GET", 
     url: 'https://164.132.84.147:55331/123456/pbx/extension/listall', 
     data: "{}", 
     contentType: "application/json; charset=utf-8", 
     dataType: 'json', 
     cache: false, 
     success: function(data) 
     { 
      console.log(data); 

     } 
    }); 

API-интерфейса вызова с помощью Ajax дать как результат массива [8], который содержит некоторые объекты с расширением attributs и именем

Я хотел бы заполните таблицу t_extension с результатом запроса ajax, вызывающего api. И я написал следующий код, чтобы заполнить таблицу, помогающую форумами differnts, которые говорят об этом.

$.ajax(
    { 
     type: "GET", 
     url: 'https://164.132.84.147:55331/123456/pbx/extension/listall', 
     data: "{}", 
     contentType: "application/json; charset=utf-8", 
     dataType: 'json', 
     cache: false, 
     success: function(data) 
     {    
      $('#t_extension').append(
       $.map(data.Extension, function (extension, index) { 
       return '<tr><td>' + extension + '</td><td>' + data.Name[index] + '</td></tr>'; 
      }).join()); 
     } , 

     error: function (msg) 
     {    
        alert(msg.responseText); 
       } 
    }); 

но это не работает, таблица не заполнена.

Answer 1

Вы должны добавить <tbody> в table первый, а затем добавить свой <tr>...</tr> персонал из Ajax запроса в <tbody>

Ваш HTML:

<table id="t_extension" class="table table-striped"> 
    <thead> 
      <tr> 
       <th>Extension</th> 
       <th>Name</th> 
       <th>Action</th> 
      </tr> 
    </thead> 
    <tbody></tbody> 
    </table> 

Ваш append:

$('#t_extension > tbody').append(...);