How to append ajax return data to a table

Question

I am trying to append data to a table based on the ajax returned data.

My codes work but it seems ugly. I was wondering if anyone here can help me to simplfy it. Thanks a lot!

    ajax.callback=function(data){
          for (var i=0; i<dataObj[0].data.length; i++){
              var td=document.createElement('td');
              td.innerHTML=dataObj[0].data[i].ID;
              var td2=document.createElement('td');
              td2.innerHTML=dataObj[0].data[i].test;
              var td3=document.createElement('td');
              td3.innerHTML=dataObj[0].data[i].year;
              var td4=document.createElement('td');
              td4.innerHTML=dataObj[0].data[i].code;
              var td5=document.createElement('td');
              td5.innerHTML=dataObj[0].data[i].Label;
              var td6=document.createElement('td');
              td6.innerHTML=dataObj[0].data[i].contents;
              var td7=document.createElement('td');
              td7.innerHTML=dataObj[0].data[i].test;

              var tr=document.createElement('tr');
              tr.appendChild(td);
              tr.appendChild(td2);
              tr.appendChild(td3);
              tr.appendChild(td4);
              tr.appendChild(td5);
              tr.appendChild(td6);
              tr.appendChild(td7);


              $('#Table').append(tr);

           }
    }

Answer 1

You could do:

ajax.callback=function(data){
    var elements = ["ID", "test", "year", "code", "Label", "contents", "test"];

    for (var i=0; i<dataObj[0].data.length; i++){
        var td;
        var tr=document.createElement('tr');

        for (var j=0; j < elements.length; ++j){
            td = document.createElement('td');
            td.innerHTML=dataObj[0].data[i][elements[j]];
            tr.appendChild(td);
        }

        $('#Table').append(tr);
    }
}

Answer 2

One (however not the most performant) of the more readable ways of doing this:

var tr = '<tr>\
    <td>{id}</td>\
    <td>{year}</td>\
    ...
    <td>{test}</td>\
</tr>';

tr = tr.replace(/{id}/, dataObj[0].data[i].ID)
    .replace(/{year}/, dataObj[0].data[i].year)
    .replace(/{test}/, dataObj[0].data[i].test);

$('#Table').append(tr);

Or use some templating engine.

Answer 3

You could use

ajax.callback=function(data){
    var keys=["ID","test","year","code","Label","contents","test"],
        tr=document.createElement('tr'),
        td=document.createElement('td');
    for (var i=0, li=dataObj[0].data.length; i<li; i++){
        var newTr=tr.clonenode(false);
        for(var j=0, lj=keys.length; j<lj; j++){
            var newTd=td.cloneNode(false);
            newTd.innerHTML=dataObj[0].data[i][keys[j]];
            newTr.appendChild(newTd);
        }
        document.getElementById('Table').appendChild(newTr);
    }
}

It's pretty much like CrazyCasta's answer, but cloning nodes is faster than creating them.