jQuery: Add new complex HTML list item in loop

Question

I have a situation where I have a load of JSON I need to process, and for each "data" item, output this on the page as a list item. This is fine, however I am conscious of the proper way to do this.

For example, one way which I can only think of is:

$.each(json.data, function(key, value) {
   $('ul').prepend("<li><div class='name'>" + value.name + "</div>...<li>");
});

Now this works, however if I have multiple layers of divs and other elements it's just going to get messy. I could make it look better in the code by multi-lining it, but that's still a horrible way to maintain it.

How do I get around this and do/present it properly?

Prehaps a template in another file which I load in, then assign HTML/text to specific elements?

megawac · Accepted Answer · 2013-11-13 16:30:15Z

2

Basically build a template so you reduce how often you are actually appending to the dom. You can write the same code snipper like this and you can expect it to preform better. Just concat the string locally and inject it all at once.

var html = "", value;
for(var i = json.data.length - 1; i >=0; i--) {//same as prepending (or reverse the list)
    value = json.data[i];
    html += "<li><div class='name'>" + value.name + "</div>...<li>";
}
$('ul').prepend(html);

Rereading your snippet I can't tell if json.data is an object or an array. For an object your original method was fine:

$.each(json.data, function(key, value) {
   html += "<li><div class='name'>" + value.name + "</div>...<li>";
});

Most templating frameworks provide a nice, minimal way to do build the same html string. If you have a question about doing this in a particular framework, shoot.

edited Nov 13, 2013 at 16:30

answered Nov 13, 2013 at 16:24

megawac

11.4k6 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alias Over a year ago

Yeah, it's an Object. That way will work I guess... are there any draw backs?

megawac Over a year ago

Not really, just assumed it was an array cause you were using prepend

Renato Zannon · Accepted Answer · 2013-11-13 16:29:24Z

1

You might want to take a look at Mustache.js or Handlebars.js to make client side templates. A small example using handlebars:

<!-- Because of the 'type' attribute, the browser won't try to execute
     this as it were javascript -->
<script type="text/x-handlebars-template" id="result-template">
   <ul>
    {{#each results}}
      <li>
        <div class='name'>{{name}}</div>
        <div class='age'>{{age}}</div>
      </li>
    {{/each}}
  </ul>
</script>

For rendering:

var source = $("#result-template").html();
var template = Handlebars.compile(source);

// The 'template' function returns the rendered HTML
var ul = $(template({results: jsonData}));

ul.appendTo("body");

Working example: http://jsbin.com/ESIKiDoK/1/edit

answered Nov 13, 2013 at 16:29

Renato Zannon

30.2k7 gold badges42 silver badges47 bronze badges

2 Comments

Alias Over a year ago

Ah this is a nice way, but I'm currently using Laravel 4 (w/ Blade Templating). I assume there will be some conflict with the {{ }}, since they both use that. Hmm.. Need to look into this.

Renato Zannon Over a year ago

@Alias You might want to take a look at this question: stackoverflow.com/questions/14324850/… It seems to have a solution for the framework you are using

Collectives™ on Stack Overflow

jQuery: Add new complex HTML list item in loop

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related