I feel my approach is unreadable and looks ugly for generating a list of items from a JSON object and adding it to an existing div.
my html:
<ul id='to-be-filled'> </ul>
my javascript
myJson = [
{
"title": "First",
"action": "1st"
},
{
"title": "Second",
"action": "2nd"
},
{
"title": "Third",
"action": "3rd"
}
]
function genList(){
var outputList = '';
$.each(myJson, function() {
outputList += '<li>' + this.title + ': ' + this.action + '</li>'
});
$('#to-be-filled').html(outputList); //set the generated html string.
}
$(document).ready(function() {
genList(); //init
});
Result is here: http://jsfiddle.net/GxdA6/
How can I improve this mess of appending html string, especially my real code has more complex DOM and JSON data structure?
g.d.d.c :
I've read a number of things that suggest that you shouldn't use string concatenation when you're doing this type of thing. Instead, something like this tends to net significant performance improvements, especially with large numbers of elements:\n\nvar toAdd = [], i = -1;\n\n$.each(myJson, function () {\n toAdd[++i] = '<li>';\n toAdd[++i] = this.title;\n toAdd[++i] = ': ';\n toAdd[++i] = this.action;\n toAdd[++i] = '</li>';\n});\n\n$('#to-be-filled').html(toAdd.join(''));\n\n\nWhether or not that qualifies as \"cleaner\" is a tough call. I've personally become accustomed to the syntax and find it pretty easy to deal with, but it's 6's. The performance is definitely there though; I can vouch for using this approach to add hundreds of elements efficiently without running into time outs or browser hangs.",
2011-07-13T15:21:42
T.J. Crowder :
If you need to do a lot of this client-side, I'd look at using templates. That plug-in is currently in beta and so it's subject to change, but I think the basics of it are pretty well set. Or you could use another templating plug-in for jQuery, there are several out there. My main message isn't \"use jQuery templates\" so much as \"use templates\". :-)\n\nBut that specific plug-in is coming along and has some major muscle behind it. There are two different ways you can define the template: Either by including it in your document as a script element:\n\n<script id=\"your-li-template\" type=\"text/x-jquery-tmpl\">\n <li>${title}: ${action}</li>\n</script>\n\n\n...which you then retrieve and use like this:\n\nvar t = $(\"#your-li-template\");\nvar outputList = t.tmpl(myJson);\n\n\nLive example\n\nOr you can define it in your JavaScript code as a string, and then use it slightly differently (this difference is, I suspect, one part of why it's still in beta):\n\n// Compile it once\nvar t = $.template(\"<li>${title}: ${action}</li>\");\n\n// Use it as often as you need\nvar outputList = $.tmpl(t, myJson);\n\n\nLive example\n\nIn both cases, apparently (from the examples) if you give it an array, it will repeatedly evaluate each item in the array against the template, so you don't even have to loop.",
2011-07-13T15:07:36
Santiago :
Mustache seems a good template alternative http://mustache.github.com/, you can use it on javascript and server side scripting, so you only have to learn one template system for all you web code.",
2011-07-13T15:11:24