display array of objects in a dynamic table javascript

Question

I want to display an array of objects in a dynamic table using javascript.

var rows=[{ name : "John", age:20, email: "xx@hotmail.com"},
    { name : "Jack", age:50, email: "xxx@hotmail.com"},
    { name : "Son", age:45, email: "xxxx@hotmail.com"}
........................etc
   ];

This is how it looks.I want to know how can I show this as a dynamic table.

Well, you iterate over the array and create the corresponding DOM elements. Or you use a template engine. Is there anything in particular you are having problems with? — Felix Kling, Mar 29 '15 at 21:58
Where exactly are you stuck? If you don't know any of it, then run through some basic DOM manipulation tutorials. — , Mar 29 '15 at 22:05
The thing is, I have one html page with input column name,age and email . i want these items to be displayed there.. — V.V, Mar 29 '15 at 22:09
We understand the problem. What have you tried? Where exactly are you stuck? — , Mar 29 '15 at 22:10
You may want to start here: [MDN Learn JavaScript](https://developer.mozilla.org/en-US/Learn/JavaScript) — , Mar 29 '15 at 22:11
@squint I tried to use document.getElementbyid but the problem is I have to generate the input columns based on number of items in the array. — V.V, Mar 29 '15 at 22:12
We understand the problem. If you don't know where to begin, start with some beginner tutorials. See the link I posted above. — , Mar 29 '15 at 22:13

score 18 · Accepted Answer · edited Oct 06 '20 at 17:01

This is how you do it:

Javascript Solution:

FIDDLE:

var rows = [{
    name: "John",
    age: 20,
    email: "xx@hotmail.com"
}, {
    name: "Jack",
    age: 50,
    email: "xxx@hotmail.com"
}, {
    name: "Son",
    age: 45,
    email: "xxxx@hotmail.com"
}];

var html = "<table border='1|1'>";
for (var i = 0; i < rows.length; i++) {
    html+="<tr>";
    html+="<td>"+rows[i].name+"</td>";
    html+="<td>"+rows[i].age+"</td>";
    html+="<td>"+rows[i].email+"</td>";
    
    html+="</tr>";

}
html+="</table>";
document.getElementById("box").innerHTML = html;

jQuery Solution:

FIDDLE

var rows = [{
        name: "John",
        age: 20,
        email: "xx@hotmail.com"
    }, {
        name: "Jack",
        age: 50,
        email: "xxx@hotmail.com"
    }, {
        name: "Son",
        age: 45,
        email: "xxxx@hotmail.com"
    }];

$(document).ready(function () {
    var html = "<table border='1|1'>";
    for (var i = 0; i < rows.length; i++) {
        html+="<tr>";
        html+="<td>"+rows[i].name+"</td>";
        html+="<td>"+rows[i].age+"</td>";
        html+="<td>"+rows[i].email+"</td>";
        
        html+="</tr>";

    }
    html+="</table>";
    $("div").html(html);
});

jQuery Solution 2:

FIDDLE

var rows = [{
  name: "John",
  age: 20,
  email: "xx@hotmail.com"
}, {
  name: "Jack",
  age: 50,
  email: "xxx@hotmail.com"
}, {
  name: "Son",
  age: 45,
  email: "xxxx@hotmail.com"
}];

const Array2Table = (arr) => {
  let Table = [];
  let top_row = [];
  let rows = [];

  for (let i = 0; i < arr.length; i++) {
    let cells = [];

    for (let property in arr[i]) {
      if (top_row.length < Object.keys(arr[i]).length) {
        top_row.push(`<th scope="col">${property}</th>`);
      }
      if (arr[i][property] === null) {
        cells.push(`<td>${null}</td>`);
      } else {
        cells.push(`<td>${arr[i][property]}</td>`);
      }
    }

    rows.push(`<tr>${cells.join("")}</tr>`);
  }

  Table.push(`<table class="table card-table table-striped">`);
  Table.push(`<thead>${top_row.join("")}</thead>`);
  Table.push(`<tbody>${rows.join("")}<tbody>`);
  Table.push("</table>");
  return Table.join("");
}

$(function() {
  let html = Array2Table(rows);
  $("div").html(html);
});

I don't see any indication that jQuery is (or should be) used. It's such a simple situation, why weight it down that way? — , Mar 29 '15 at 22:08
sorry to dig up an old topic, but how would you incorporate the JavaScript method into a function, called from html modal? — tCoe, Feb 14 '18 at 16:14

display array of objects in a dynamic table javascript

1 Answers1

Linked