Closing json data populated table

Question

I'm trying to delete the existing table in a div and create a new one each time the page receive json encode data.

I have problems closing the table?

html:

<div id="tblContent"></div>

jQ:

var um_getallusers='<table class="table-hover" id="um"><thead><tr><th class="col-md-1">ID</th><th class="col-md-4">Name</th><th class="col-md-4">username</th><th class="col-md-3"></th></tr></thead><tbody>'; 
    $.getJSON('php/um_getallusers.php',function(dta){
      $("#tblContent").remove(); //del table
      $.each(dta,function(index,item){
        um_getallusers+='<tr><td>'+item.id+'</td><td>'+item.name+'</td><td>'+item.username+'</td></tr>';
      });
      var um_getallusers='</tbody></table></table>'; // this is my problem

      $('#um').html(um_getallusers);
    });

Answer 1

You're re-declaring the variable um_getallusers after you're already using it, plus you're resetting the value (by using um_getallusers='</tbody></table></table>'; instead of um_getallusers+='</tbody></table></table>'; .

var um_getallusers='<table class="table-hover" id="um"><thead><tr><th class="col-md-1">ID</th><th class="col-md-4">Name</th><th class="col-md-4">username</th><th class="col-md-3"></th></tr></thead><tbody>'; 
    $.getJSON('php/um_getallusers.php',function(dta){
      $("#tblContent").remove(); //del table
      $.each(dta,function(index,item){
        um_getallusers+='<tr><td>'+item.id+'</td><td>'+item.name+'</td><td>'+item.username+'</td></tr>';
      });
      um_getallusers+='</tbody></table></table>'; // this is my problem

      $('#um').html(um_getallusers);
    });

So, delete the extra var and add in a +

Answer 2

I suggest you to use a template for the rows, and for the tables if you require to. If you use several calls to the append method or too much string concatenation, watch out, this is spaghetti code and later the maintenance when the tables get bigger is a nightmare. The templates makes cleaner your HTML and Javascript.

The coolest way to do this would be with the new template tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

<template>

But right now is "only" supported by all browsers but...IE https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#Browser_compatibility

You can use several js libraries for templating like:

• Mustache http://mustache.github.io/
• Handlebarsjs http://handlebarsjs.com/
• Underscorejs http://underscorejs.org/#template
• Ractivejs http://www.ractivejs.org/
• @Roamer-1888 suggested a very interesting article (for historical reasons and for John Resig's authority ) John Resig's Micro-templating http://ejohn.org/blog/javascript-micro-templating/ you can see what kind of stuff a template library has to deal with.

Big and popular frameworks use these libraries (or similar techniques) like Ember.js, Angular.js, Backbone and others.

This is an example with my favorite library for templating, Ractivejs, in a JSfiddle: http://jsfiddle.net/Katio/3usbro20/

And in a Stackoverflow snippet:

  var Section = Ractive.extend({ el: 'container', template: '#table-template', data: {rows : [ {id : 1, name: "John", username: "Jony41"}, {id : 2, name: "Paul", username: "Pmac44"}, {id : 3, name: "George", username: "Harris44"}, {id : 4, name: "Ringo", username: "Star43"} ] } }); var rSection = new Section({ }) $("#button1").on("click", function(){ rSection.set( "rows", [ {id : 6, name: "Garry", username: "Kimo63"}, {id : 7, name: "Anatoly", username: "Karpy51"}, {id : 8, name: "Robert", username: "Bob42"}, {id : 9, name: "Mihail", username: "Boty12"} ] ) }) 

 <script src="https://rawgit.com/katio/FilesForFiddle/master/ractivejs/0.5.5/ractive20140828.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="x-template" id="table-template"> <table> <thead> <tr> <th> ID </th> <th> NAME </th> <th> USER NAME</th> </tr> </thead> <tbody> {{#rows}} <tr> <td> {{id}} </td> <td> {{name}} </td> <td> {{username}}</td> </tr> {{/rows}} </tbody> <tbody> </tbody> </table> <input type="button" value = "Load JSON and update only the rows" id="button1"> </script> <div id="container"></div> 

Answer 3

Why not leave the table and its thead in place and just replace the contents of the tbody?

First make sure that the table, its thead and tbody are in place in the DOM, then :

$.getJSON('php/um_getallusers.php',function(dta) {
    var $tbody = $("#um tbody").empty();
    $.each(dta, function(index, item) {
        $tr = $("<tr/>").appendTo($tbody);
        $('<td/>').text(item.id).appendTo($tr);
        $('<td/>').text(item.name).appendTo($tr);
        $('<td/>').text(item.username).appendTo($tr);
    });
});