Generate HTML from JSON

Question

I have to generate a lot of tables from different JSON files (up to 20 tables per page). Because it's a lot of data, I really want to keep loading speed in mind. I know it's better to use a non jQuery solution, but native is not in my skillset right now.

$(document).ready(function(){
 (function getPersonData(){
 $.getJSON('path/to/json', function(data){
 (function addPersonsTable1(personsData){
 var elementContainer = '';
 $.each(personsData.persons, function(key, person){ 
 elementContainer = elementContainer + '<tr>' +
 '<td>' + person.value1 + '</td>' + 
 '<td>' + person.value2 + '</td>' + 
 '<td>' + person.value3 + '</td>' + 
 '<td>' + person.value4 + '</td>' + 
 '<td>' + person.value5 + '</td>' + 
 '</tr>';
 });
 $('.persons-table-1').append(elementContainer);
 }(data));
 (function addPersonsTable2(personsData){
 var elementContainer = '';
 $.each(personsData.persons, function(key, person){ 
 elementContainer = elementContainer + '<tr>' +
 '<td>' + person.value1 + '</td>' + 
 '<td>' + person.value2 + '</td>' + 
 '<td>' + person.value3 + '</td>' + 
 '<td>' + person.value4 + '</td>' + 
 '<td>' + person.value5 + '</td>' + 
 '</tr>';
 });
 $('.persons-table-2').append(elementContainer);
 }(data));
 /*
 *
 *
 *
 *
 * <..... And many more tables
 *
 *
 *
 *
 */
 }).done(function(){
 loadedAnimation();
});
});

Answer 1

Use detach to remove the elements from the DOM, append the tables to the detached nodes, then add them back to to DOM:

var table = $( "#myTable" );
var parent = table.parent();
table.detach();
 // ... add lots and lots of rows to table
parent.append( table );

References

• Detach Elements to Work with Them

• jQuery API: detach