Dynamically Building HTML Table with Javascript Object

Question

Here I'm looping through an object and retrieving the key:value pairs and placing them in a table

obj = clickedRecord.toJSON(); //gets record from 
                              //separate table and converts to JSON format
var array=[];
for(key in obj) {
   if(obj.hasOwnProperty(key)) {
      array.push(
         '<table id="myTable">' +
             '<tr>' +
               '<td>' + key + '</td>' +
               '<td>' + obj[key] + '</td>' +
             '<tr>' +
         '</table>''
      );
   }
}

The output of which is:

ID 100
,
Name Billy
,
Address 525 Park Lane
,

Is there a cleaner way to dynamically construct a table using a javascript Object, as well as omit the commas from the returned data?

Not really, unless you want to use jquery or Just straight DOM manipulation. Which is basically the same just with a couple of less lines. — Jay
– Jay, Commented Sep 5, 2014 at 16:58
Your output seems to be a string presentation of an array. Add .join('') to the end of the output expression. — Teemu
– Teemu, Commented Sep 5, 2014 at 16:58
Thanks @Teemu the .join('') did the trick. I just realized I'm making a table for each iteration of the loop-no bueno — Clay Banks
– Clay Banks, Commented Sep 5, 2014 at 17:03

Donal · Accepted Answer · 2014-09-05 17:04:24Z

1

Something like this:

   var table = document.createElement('TABLE');
   table.setAttribute("id", "myTable");

   for(key in obj) {
       var tr = document.createElement('TR');
       table.appendChild(tr);

       var td = document.createElement('TD');           
       td.appendChild(document.createTextNode(key));
       tr.appendChild(td);

       var td2 = document.createElement('TD');           
       td2.appendChild(document.createTextNode(obj[key]));
       tr.appendChild(td2);
   }

answered Sep 5, 2014 at 17:04

Donal

33.2k10 gold badges69 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Donal Over a year ago

@ClayBanks No problem, glad to be of help.

Collectives™ on Stack Overflow

Dynamically Building HTML Table with Javascript Object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related