Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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>');  
        }); 

    });

});
share|improve this question

2 Answers

up vote 0 down vote accepted

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 );

});
share|improve this answer
Also, I would strongly advise you use a DOM function to render your elements. It's easier to maintain your code this way. Basically, when you output from JSON, you should have a function that builds a specific DOM from your JSON. – flav Dec 18 '12 at 11:01
Thanks for the insight! I will change the id to val.key. It seems like trying to style the individual dd & dt tags would be very complicated. Couldn't I just use the <dl> tags as my block? – Barry P Dec 18 '12 at 11:12
Alex23, I tried to make a function like you described. I had the function above my $(doc).ready function and was getting a not defined error. I just need to make the json content global, right? I'm still learning js. – Barry P Dec 18 '12 at 11:18
up vote 0 down vote

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

Probably not, and if efficiency is important I'd do something like this:

$.getJSON('output.php', function(data) {
    var fragment = document.createDocumentFragment();

    for (key in data) {
        var div = document.createElement('div'),
            dl  = document.createElement('dl'),
            dd  = document.createElement('dd'),
            dd2 = document.createElement('dd'),
            dt  = document.createElement('dt'),
            img = document.createElement('img');

        div.className = 'wineBlock';
        img.src = 'img/sample_btl.jpg" alt="'+data[key].winery+' - '+data[key].vintage+' '+data[key].varietal+' '+data[key].name;
        dt.appendChild(document.createTextNode(data[key].winery));
        dd2.appendChild(document.createTextNode(data[key].name));

        dd.appendChild(img);
        dl.appendChild(dd);
        dl.appendChild(dt);
        dl.appendChild(dd2);
        div.appendChild(dl);
        fragment.appendChild(div);
    }

    $("#winesFriends").append(fragment);
});​
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.