Javascript/jquery Execution Order Question

I am using jQuery to try and construct a table for a web app from a JSON object (using the async getJson call), and I am having difficulty getting to the bottom of the order of exe

Solution 1:

The problem here is probably that you can't append partial HTML to an element like you're doing. When you append <table><tbody>, the browser will actually close the tags too. Then, when you append trs etc., it's no longer inside the table, and the browser will again attempt to correct it, generating broken markup.

You need to first construct the entire markup and only after that append it.

Something like this should work:

var html = "<table><thead><tr><th>column header!</th>"
         + "</tr></thead><tbody>";

$.each(jsonArray.members, function(i, membObj) {
    html += "<tr>"
          + "<td>" + membObj.name + "</td>"
          + "</tr>";
});

html += "</tbody></table>";

$('#peopleDirectory').append(html);