Ajout de jQuery au tableau HTML

Question

Je tente de remplir une table vide avec des données renvoyées à partir de la requête Ajax. La table remplit à l'intérieur des colonnes correctes, mais toutes les données de données sont regroupées (dans une longue chaîne) et toutes les données de taux d'intérêt sont regroupées (dans une chaîne longue). Malgré cela, la ligne Console.log() fonctionne parfaitement et montre chaque élément, énuméré, le tout sur des lignes séparées.

Mon code est ci-dessous:

HTML

<table id="table" border="1"> 
    <tr> 
     <th>Date</th> 
     <th>Value</th> 
    </tr> 
    <tr> 
     <td id='col1'></td> 
     <td id='col2'></td> 
    </tr> 
    </table> 

Javascript/jQuery

$.getJSON("api", function(data) { 
    for (var x =1; x <= data.count -1 ; x++){ 
     $("#col1").append(data.observations[x].date); 
     $("#col2").append(data.observations[x].value); 
     console.log(x, data.observations[x].date, data.observations[x].value); 
     } 
}) 

Comment puis-je réécris pour que chaque date et le taux d'intérêt est sur une ligne séparée. Exemple: ligne1: date1 et valeur1, ligne2: date2 et valeur2, etc.

P.S. La réponse devrait inclure $.getJSON(api, data) et NON inclus $.parseJSON(data) ou $.each(data)) ou success: function (data))

Answer 1

Essayez de générer dynamiquement une nouvelle <tr> ligne pour chaque résultat dans votre table. L'exemple ci-dessous vous donnera également des identifiants uniques pour chaque nouvelle colonne <td>dynamiquement ajoutée par ex. col-1, col-2 etc.

var i = 1; 
 
var j = 2; 
 

 
for(i=1; i<=10; i++) 
 
{ 
 
    $("#table").append("<tr><td id='col-" + i + "'>" + "col-" + i + "</td><td id='col-" + j + "'>" + "col-" + j + "</td></tr>"); 
 
    
 
    i++; 
 
    j = j+2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table" border="1"> 
 
    <tr> 
 
    <th>Date</th> 
 
    <th>Value</th> 
 
    </tr> 
 
</table>

Et votre script serait quelque chose comme:

$.getJSON("api", function(data) 
{ 
    var x = 1; 
    var z = 2; 

    for (x =1; x <= data.count -1 ; x++){ 
     $("#table").append("<tr><td id='col" + x + "'>" + data.observations[x].date + "</td><td id='col" + z + "'>" + data.observations[x].value + "</td></tr>"); 

     x++; 
     z = z+2; 
     } 
}); 

Answer 2

$.getJSON("api", function(data) { 
 
    var $table = $("#table") 
 
     
 
    for (var x =1; x <= data.count -1 ; x++){ 
 
     var $row = $("<tr>"), 
 
     dateCell = $("td").text(data.observations[x].date), 
 
     valueCell = $("td").text(data.observations[x].value) 
 
     $row.append(dateCell).append($valueCell) 
 
     $table.append($row) 
 
     
 
     console.log(x, data.observations[x].date, data.observations[x].value); 
 
     } 
 
})

<table id="table" border="1"> 
 
    <tr> 
 
     <th>Date</th> 
 
     <th>Value</th> 
 
    </tr> 
 
    <tr> 
 
     <td id='col1'></td> 
 
     <td id='col2'></td> 
 
    </tr> 
 
    </table>

(depuis que je n'ai pas accès t o votre API, ceci est complètement non testé)

Answer 3

voici ma méthode, faites un modèle et remplacez ensuite les variables par les valeurs, j'ai commenté les lignes principales et fait une démonstration de maquette.

//$.getJSON("api", function(data) { 
 
var data = [1,2,3,4]; 
 
    for (var x of data){ 
 
     //var html = `<tr><td>$1</td><td>$2</td></tr>`.replace('$1', data.observations[x].date).replace('$2', data.observations[x].value); 
 
     var html = `<tr><td>$1</td><td>$2</td></tr>`.replace('$1', 1).replace('$2', 2); 
 
     $('#table').append(html); 
 
     //console.log(x, data.observations[x].date, data.observations[x].value); 
 
     } 
 
//})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table" border="1"> 
 
    <tr> 
 
     <th>Date</th> 
 
     <th>Value</th> 
 
    </tr> 
 
    </table>

Answer 4

une rangée et Append cellules pour chaque enregistrements:

for (var x=0 ; x<data.count ; x++){ 
    var obs = data.observations[x]; 
    $('<tr/>').append(
    $("<td/>").text(obs.date), 
    $("<td/>").text(obs.value) 
).appendTo("#table") 
} 

Answer 5

est ici une solution avec un fichier JSON de l'échantillon.

JS Fiddle DEMO

Code HTML:

<table id="table" border="1"> 
    <thead> 
     <tr> 
      <th>Date</th> 
      <th>Value</th> 
     </tr> 
    </thead> 
    <tbody> 

    </tbody> 
    </table> 

JS:

onSuccess: function (response) { 
      response.forEach(function(row) { 
     $('table#table tbody').append("<tr class='tablerow'><td class='col1'>"+row.date+"</td><td class='col2'>"+row.value+"</td></tr>"); 
     }); 
    } 

Vous pouvez devoir changer la table HTML ainsi (c.-à séparer l'en-tête et le corps par thead et tbody).Le code ci-dessus ajoute des lignes en fonction de la longueur de la réponse. J'espère que cela t'aides.