Remplissage d'une table de JSON avec jQuery

Est-ce un moyen efficace de remplir un tableau avec des données JSON à l'aide de jQuery ou est-il mieux/moins cher? Le nombre maximal de lignes sera autour de 100. Je préfère ne pas utiliser un plugin.

JS:

$.ajax({
    url: 'public.json',
    dataType: 'json',
    success: function(data) {
        var row = '<tr class="header">';
        for (var i in data.headers) {
            row += '<th style=""><a href="#" class="sort"><span>' + data.headers[i] + '</span></a></th>';
        }
        row += '</tr>'
        $(row).appendTo('table.data');
        row = '';
        for (var i in data.rows) {
            row += '<tr id="' + i + '">';
            row += '<td>' + data.rows[i].date + '</td>';
            row += '<td>' + data.rows[i].company + '</td>';
            row += '<td>' + data.rows[i].location + '</td>';
            ...
            row += '</tr>';
        }
        $(row).appendTo('table.data');
    },
});

JSON:

{
    "headers": {
        "date": "Date",
        "company": "Company",
        "location": "Location",
        ...
    },
    "rows": [{
        "date": "09/18/2011",
        "company": "Company name",
        "location": "US",
        ...
    },
    ...
}

EDIT: Essentiellement, je suis en train de voir si de regrouper toutes les lignes en une chaîne de caractères, la transformant en un objet jQuery, puis ajouter à la table est une bonne idée, en supposant que cela peut être fait à de multiples reprises sur la page pour actualiser les données.

Avez-vous regardé dans jQuery templates - api.jquery.com/category/plugins/templates ?
Je ne pense pas qu'il est bon de proposer à l'aide d'un plugin qui est en version bêta et est sujet à changement pour des raisons de production.
documentation sujets de préoccupation de l'jQuery Templates plugin". L'OP a déclaré qu'ils ne voulaient pas d'en utiliser un.
et JamWaffles: Mon mauvais. Je n'ai manquer de mentionner les plugins étant hors de portée.
réponse une autre question suggère que votre approche "de construire la chaîne d'abord, puis ajouter le tout dans un appel" est en effet plus performant que de multiples ajoute.

OriginalL'auteur Alex | 2011-10-05

  1. 7

    Plutôt que de la for .. in de la syntaxe et de la chaîne de construction, je voudrais utiliser le jQuery.chacun() function

    Comme ceci:

    $.ajax({
    url: 'public.json',
    dataType: 'json',
    success: function(data) {
        var $tr =$('<tr>').addClass('header');
        $.each(data.headers, function(i,header){
            $tr.append($('<th>').append($('a').addClass('sort').attr('href','#').append($('span').text(header))));
        });
        $tr.appendTo('table.data');
        $.each(data.rows,function(i,row){
            $('<tr>').attr('id',i).
                append($('<td>').text(row.date)).
                append($('<td>').text(row.company)).
                append($('<td>').text(row.location)).appendTo('table.data');
        });
    }
});
    Quels sont les avantages de l'utilisation de $.au lieu de...? J'étais sous l'impression que le $.chacun d'eux est plus coûteux que pour les....
    Vous avez raison. Je ne le savais pas. Vous pouvez utiliser jQuery plutôt que de la chaîne de construction, mais comme votre question est à propos de la cherté, je suppose que ton code est très bien... jsperf.com/jquery-each-vs-for-loop/6

    OriginalL'auteur Floyd Pink