Add table elements from array of objects using jQuery

Question

I know that given enough time I'll figure this out, but it sure would be nice if some kind soul can point me in the right direction. I am relatively inexperienced with jQuery, but I have somewhat intermediate javascript knowledge.

Given an array of objects in the form:

[
   {"value1":"10/14/2010", "value2":"1", "value3":"1178.94"},
   {"value1":"10/12/2010", "value2":"1", "value3":"1341.49"}
]

How do I add a tr for each array element, with value1, value2, and value3 as the contents of each child td element?

What's been stopping me is this:

var b = $('#table tbody');
tr = b.append($("<tr></tr>"));
tr.append($("<td>blah</td><td>blah</td><td>blah</td>"));

It appends the tr element, which I've proven through regular DOM methods. But it won't append the td elements. It's acting like the result of b.append() is not the appended tr element? I suppose that may be right and I need to do:

tr = $("<tr></tr>");
b.append(tr);
tr.append(...);

Anyway, your help getting me on the right track would be very appreciated.

---

Never mind the bonus question, but here it is for reference since I posted it initially.

The first two values are actually x and y coordinates for the third value. So the leftmost column shows the date, the top row shows the number 1 or 2, and the decimal value should go in the corresponding cell. Any thoughts on the best way to do this would be appreciated as well. But this question was mostly about why my jQuery stuff isn't working.

That is, the table needs to look like this:

              1       2
10/17/2010  2345.6  1543.2
10/16/2010          1234.5
10/15/2010  2222.2

But I was trying to see if my whole ajax/JSON round trip was working first and couldn't even get that!! I'll do a kind of "merge join" stepping through the list of dates/columns and filling in values that are present, and doing something else for missing values.

Answer 1

When you do:

b.append($("<tr></tr>"));

it is returning b, so the tr variable is actually referenceing the tbody.

Try this:

var b = $('#table tbody');
tr = $("<tr></tr>").appendTo(b);
tr.append( "<td>blah</td><td>blah</td><td>blah</td>" );

This uses jQuery's .appendTo() method instead in order to reverse the position so that the new <tr> is being returned.

Or you could avoid the variables altogether like this:

$("<tr></tr>").appendTo( '#table tbody' )
              .append("<td>blah</td><td>blah</td><td>blah</td>");

or

$("<tr></tr>").append("<td>blah</td><td>blah</td><td>blah</td>")
              .appendTo( '#table tbody' );

Answer 2

try this:

//change arrayList to your array variable
var t = "";
$.each(arrayList, function(i, v) {
   t += '<tr><td>'+v.value1+'</td><td>'+v.value2+'</td><td>'+v.value3+'</td></tr>';
});
$('#table tbody').append(t);

This should do it!