Generate html from array in a better way

Question

Let's say I have an array of Customer structures and I need to generate HTML from it.

Currently I do something like this:

jQuery.each(customers, function(index, item) {
     html =+ "<tr custID='" + item.ID + "'><td>" + item.Name + "</td><td>" + item.City + "</td></tr>";  
});

The issue here is that I manually add the custID attribute. I believe the cool way to do this would be using jQuery's Data function.

But how would I use it in this scenario?

just google for javascript template engines or MVVM javascript frameworks. — madfriend, Jul 30 '12 at 22:00
I've used http://api.jquery.com/tmpl/ in the past. Works pretty well. — powerbuoy, Jul 30 '12 at 22:03
It would be cool to use a template engine and not generate html by concatenating strings in js. — gion_13, Jul 30 '12 at 22:05

score 2 · Accepted Answer · edited May 23 '17 at 10:27

2

The elegant way is not to append those html tags as if they are text, but create element using

document.createElement("tr");

you can modify its attributes and then append it to the html file.

Read more here:

jQuery document.createElement equivalent?

edited May 23 '17 at 10:27

Community

1
1

answered Jul 30 '12 at 22:08

Jonathan Chow

703
7
29

score 1 · Answer 2 · answered Jul 30 '12 at 22:01

Just prefix the attribute with data-:

jQuery.each(customers, function(index, item) {
  html += "<tr data-custID='" + item.ID + "'><td>" + item.Name + "</td><td>" + item.City + "</td></tr>";  
});

Now you can access the data using the methods in jQuery.

(I changed the non-existing =+ operator to +=. Guess it was just a typo in the question.)

score 0 · Answer 3 · answered Jul 30 '12 at 22:04

You can use data grid i think it is much cooler than manually creating tables. But in your case you have to use append() function.

Here is good examples: http://jquery-howto.blogspot.com/2009/02/add-table-row-using-jquery-and.html http://api.jquery.com/append/

Generate html from array in a better way

3 Answers3

Linked