プログラムでいくつかのtdをtr - jQueryに追加するAjax JSON

Question

私はjsonの応答について何も知らずにテーブルにtrを追加する方法を探していましたが、現時点ではこれに達しました：

function getClientes(){ 
    $.ajax({ 
    url:URL_BASE+"Cliente", 
    type:"GET", 
    beforeSend: function (xhr) { 
     xhr.setRequestHeader ("Authorization", "Basic " + btoa("hola" + ":" + "hola")); 
    }, 
    success: function (data){ 
      $.each(data,function(index,value){ 
       $('<tr>').append(
        $.each(value,function(value,celda) 
        { 
         $('<td>').text(celda); 
        })      
      ).appendTo('#table'); 
      }) 
     } 
    });  
} 

問題は、私はこのように私の.html出力を得ているということです。

<table id="table" class="table table-condensed"> 
    <tr></tr> 
    <tr></tr> 
</table> 

だから、これはTRにTDを追加されていない、私はそれを知っているmannuallyそれらを追加する必要はありませんそれは非常に簡単ですが、これは私のために良い方法です、助けてください：D

Answer 1

これであなたのコードを置き換え::

function getClientes(){ 
    $.ajax({ 
    url:URL_BASE+"Cliente", 
    type:"GET", 
    beforeSend: function (xhr) { 
     xhr.setRequestHeader ("Authorization", "Basic " + btoa("hola" + ":" + "hola")); 
    }, 
    success: function (data){ 
      $.each(data,function(index,value){ 
       $('tr').append(
        $.each(value,function(value,celda) 
        { 
         $('td').text(celda); 
        })      
      ).appendTo('#table'); 
      }) 
     } 
    });  
} 

私はそれが動作すると思います。

Answer 2

私はあなたが以下の最初のテーブルの行を作成し、このペンを参照してくださいセレクタ$('tr:last')

var data = [["hello", "A"], ["hiii", "B"], ["hey", "C"]] 
 

 

 
$.each(data,function(index,value){ 
 
       $("#table").append('<tr></tr>') 
 
        $.each(value,function(value,celda) 
 
        { 
 
         $('tr:last').append('<td>' + celda + '</td>'); 
 
        })     
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table" class="table table-condensed"> 
 
</table>

Answer 3

を使用して、最後のテーブル行に追加するようなあなたのデータを追加する必要があるとしますhttp://codepen.io/rarmatei/pen/XpYWNL

jQueryの$。eachの代わりに配列の "map"演算子を使用しました。

あなたの関数では、各$ .each（）インタラクション内に$('<td>').text(celda);を実行すると、VMは生成されたHTML要素の最終セットに追加する結果を格納/返すことなくこの命令を実行します。 、

Answer 4

function getClientes() { 
 
    $.ajax({ 
 
    url: URL_BASE + "Cliente", 
 
    type: "GET", 
 
    beforeSend: function(xhr) { 
 
     xhr.setRequestHeader("Authorization", "Basic " + btoa("hola" + ":" + "hola")); 
 
    }, 
 
    success: function(data) { 
 
     data.map(value => { 
 
     var elements = value.map(subValue => { 
 
      return $('<td>').text(subValue); 
 
     }); 
 
     return $('<tr>').append(elements); 
 
     }).appendTo('#table'); 
 
    } 
 
    }) 
 
}

は最終的に私は、行を作成し、各ループではなく、最良の答えに手動で追加するが、それは私の作品：

は、だからあなたの関数は、以下のようになります。すべての答えをありがとう：D

function getClientes(){ 
$.ajax({ 
url:URL_BASE+"Cliente", 
type:"GET", 
beforeSend: function (xhr) { 
    xhr.setRequestHeader ("Authorization", "Basic " + btoa("hola" + ":" + "hola")); 
}, 
success: function (data){ 
     $.each(data,function(index,value){ 
     var row = $("<tr/>");     

       $.each(value,function(value,celda) 
       { 
        row.append($('<td>').text(celda)); 
       });      
     $('#table').append(row); 
     }) 
    } 
});  
}