Ajout de td aux lignes avec la boucle $ .each JQuery

Question

J'essaie d'ajouter des données aux cellules du tableau via une boucle de JQuery. Mon code pour la boucle est ci-dessous.

$.getJSON(filter, function (data) { 
     $.each(data, function (key, val) { 
      var entry = $('<tr>').append(
      $.each(val, function (key, val) {  
       $('<td contenteditable="true">').text(val); 
      })); 

      // var entry = $('<tr>').append(
      //  $('<td contenteditable="true">').text(val.firstName), 
      //  $('<td contenteditable="true">').text(val.lastName), 
      //  $('<td contenteditable="true">').text(val.address), 
      //  $('<td contenteditable="true">').text(val.city), 
      //  $('<td contenteditable="true">').text(val.state), 
      //  $('<td contenteditable="true">').text(val.zipcode) 
      //); 
      entry.appendTo(table); 

Le code de boucle ne remplit pas la table avec les lignes. Si je cours la section commentée au-dessous de la boucle de $ .each à la place il remplit bien. Je peux enregistrer la valeur de val dans la boucle et les données arrivent très bien. Je peux même me connecter au td Toutes les idées sur pourquoi cela ne fonctionne pas seront grandement appréciées.

Answer 1

Le problème est dû au fait que vous ne pouvez pas appeler $.each() à partir de la méthode append() - du moins pas de la manière dont vous essayez de le faire. Vous devez d'abord ajouter les éléments tr, puis ajouter le td à cela dans la boucle interne.

Sinon, vous pouvez construire le code HTML dans une seule chaîne et appeler append() une fois, comme ceci:

$.getJSON(filter, function(data) { 
    $.each(data, function(key, val) { 
    var tds = val.map(function(value) { 
     return ' <td contenteditable="true">' + value + '</td>'; 
    }); 
    table.append('<tr>' + tds.join('') + '</tr>'); 
    }); 
}); 

Answer 2

Chaque méthode juste itère, vous voulez redonner l'élément et que vous utilisez la carte au lieu de chaque :

$.map(val, function (key, val) {  
    return $('<td contenteditable="true">').text(val); 
}) 

Answer 3

append peut accepter une fonction et utilisera sa valeur de retour. Vous devez afficher les résultats dans votre append et renvoyer ce résultat.

$.each(data, function (key, val) { 
    var entry = $('<tr>').append(
     return $.map(val, function (key, val) {  
      return $('<td contenteditable="true">').text(val); 
     })); 
});