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