Question

Is this the most efficient way to loop through json data and print a div block?

Should I be concerned having this much HTML being appended with js? Right now my json array is only 10 items, but what if it was 150. I’ve been away from development for quite some time and a LOT has changed. I would greatly appreciate any direction, thanks in advance!

Barry

$.getJSON('output.php', function(data) {

    $.each(data, function(key, val) {

        $("#winesFriends").append(function() {
                return('<div id="wineBlock"><dl><dd><img src="img/sample_btl.jpg" alt="' + val.winery + ' - '+val.vintage+' '+val.varietal+' '+val.name+'"></dd><dt>' + val.winery + '</dt><dd>' + val.vintage + " " + val.name + '</dd></dl></div>');  
        }); 

    });

});

Answer 1

You could collect all HTML code, you are generating and append it in one step like this:

$.getJSON('output.php', function(data) {

    var out = '';

    $.each(data, function(key, val) {
        out += '<div id="wineBlock"><dl><dd><img src="img/sample_btl.jpg" alt="' + val.winery + ' - '+val.vintage+' '+val.varietal+' '+val.name+'"></dd><dt>' + val.winery + '</dt><dd>' + val.vintage + " " + val.name + '</dd></dl></div>';  
    });

     $("#winesFriends").append( out );

});

Besides this, you HTML seems quite verbose. Are you sure you need a seperate <dl> around every entry? I think a single <dl> would suffice. This would also solve another problem, you have right now: All your <div> elements share the same id. An id, however, should be unique throughout the document!

$.getJSON('output.php', function(data) {

    var out = '<div id="wineBlock"><dl>';

    $.each(data, function(key, val) {
        out += '<dd><img src="img/sample_btl.jpg" alt="' + val.winery + ' - '+val.vintage+' '+val.varietal+' '+val.name+'"></dd><dt>' + val.winery + '</dt><dd>' + val.vintage + " " + val.name + '</dd>';  
    });

    out += '</dl></div>';

    $("#winesFriends").append( out );

});