Wie man eine HTML-Tabelle mit dem Ergebnis von aa Anfrage Ajax aufzufüllen

Question

Ich habe die nächste HTML-Tabelle, die ich mit dem Ergebnis einer Ajax-Anforderung füllen will: Tabelle t_extension

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

und ich rufe die api via 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); 

     } 
    }); 

der API-Aufruf über ajax geben, wie ein Array führen [8], dass einige Objekte mit dem attributs Erweiterung und Name ich möchte

enthält zum befüllen Sie die Tabelle t_extension mit dem Ergebnis der Ajax-Anforderung, die die API aufruft. Und ich schrieb den nächsten Code, um die Tabelle zu füllen, die von den verschiedenen Foren hilft, die über diesen Punkt sprechen.

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

aber es funktioniert nicht, die Tabelle ist nicht ausgefüllt.

Answer 1

Sie haben <tbody> in die table erste anhängen und dann <tr>...</tr> Mitarbeiter von Ajax-Request anhängen in <tbody>

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

Ihre append:

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