JSON objects and HTML tables

Question

First time poster here and new to JavaScript...

Below is my JSON object...

[  
   {  
      "Name":"Ted",
      "EmailAddress":"[email protected]",
      "Title":"Director",
      "Expertise":"Statistics",
      "PhoneNumber":"444-444-4444"
   },
   {  
      "Name":"Ann",
      "EmailAddress":"[email protected]",
      "Title":"Director",
      "Expertise":"Physics",
      "PhoneNumber":"444-444-5555"
   }
]

What I need is to be able to loop through this to add each table row for each employee. There are five values: Name, EmailAddress, Title, Expertise, PhoneNumber

This is what I have so far...

$(function () {
var Employees= [{"Name":"Ted","EmailAddress":"[email protected]","Title":"Director","Expertise":"Statistics","PhoneNumber":"444-444-4444"}, {"Name":"Ann","EmailAddress":"[email protected]","Title":"Director","Expertise":"Physics","PhoneNumber":"444-444-5555"}];

$("#pager").append("<table id='employeelist' class='table'><table>");

//for loop goes here//

Any help would be appreciated!

EDIT: Also, how would I make the e-mail addresses 'clickable'/'mail to' the address?

tymeJV · Accepted Answer · 2015-03-09 20:02:34Z

2

A simple loop will do, you should also build the entire HTML string, then append:

var table = "<table id='employeelist' class='table'>";
for (var i = 0; i < Employees.length; i++) {
    //Create the table row
    table += "<tr>";

    //Create table cells
    table += "<td>" + Employees[i].Name + "</td>";
    table += "<td>" + Employees[i].EmailAddress + "</td>";
    table += "<td>" + Employees[i].Title + "</td>";
    table += "<td>" + Employees[i].Expertise + "</td>";
    table += "<td>" + Employees[i].PhoneNumber + "</td>";

    //Close table row
    table += "</tr>";
}
table += "</table>";
$("#pager").append(table);

answered Mar 9, 2015 at 20:02

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

1 Comment

Tara Butler Over a year ago

Also- do you know how I would make the e-mail addresses 'mail to' the correct address?

Henrik Karlsson · Accepted Answer · 2015-03-09 20:06:04Z

0

Since JSON objects are just normal Javascript objects, you can treat them as such.

For example, in order to loop over them you could just do normal Javascript loop:

for(var i = 0; i < Employees.length; i++) {
    var employee = Employees[i];
}

and then, in order to access information from an employee, you can just do employee.Name to access it's name, employee.Title for the title etc.

Using the information in employee.Name and the others, you can simply build your strings using that information:

str += '<td>' + employee.Name + ...

and then finally append it with $("#pager").append(str);.

answered Mar 9, 2015 at 20:06

Henrik Karlsson

5,7634 gold badges28 silver badges43 bronze badges

Comments

Jashwant · Accepted Answer · 2015-03-09 20:08:25Z

'Welcome to Stackoverflow and javascript :)'

It is actually a javascript object ( not JSON object ).

$(function() {
  var Employees = [{
    "Name": "Ted",
    "EmailAddress": "[email protected]",
    "Title": "Director",
    "Expertise": "Statistics",
    "PhoneNumber": "444-444-4444"
  }, {
    "Name": "Ann",
    "EmailAddress": "[email protected]",
    "Title": "Director",
    "Expertise": "Physics",
    "PhoneNumber": "444-444-5555"
  }];

  var table = '<table id="employeelist" class="table">';
  for (var i = 0, j = Employees.length; i < j; i++) {
    table += '<tr>';
    table += '<td>' + Employees[i].Name + '</td>';
    table += '<td>' + Employees[i].EmailAddress + '</td>';
    table += '<td>' + Employees[i].Title + '</td>';
    table += '<td>' + Employees[i].Expertise + '</td>';
    table += '<td>' + Employees[i].PhoneNumber + '</td>';
    table += '</tr>';

  }
  table += '</table>';

  $("#pager").append(table);
});

Skywalker · Accepted Answer · 2015-03-09 20:16:12Z

0

You are using jQuery. Then it should be something like this:

var table=$("<table>",{
   id:"employeelist"
}).addClass("table");
table.appendTo($("#pager"));
$("#pager").append(table);
$.each(Employees, function(index, employee){
    var row=$("<tr>",{});
    $("<td>",{
         html:employee.name
    }).appendTo(row);

 $("<td>",{
         html:employee.EmailAddress
 }).appendTo(row);
 $("<td>",{
         html:employee.Title
 }).appendTo(row);
 $("<td>",{
         html:employee.Expertise
 }).appendTo(row);
 $("<td>",{
         html:employee.PhoneNumber
 }).appendTo(row);
 row.appendTo(table);
});

answered Mar 9, 2015 at 20:16

Skywalker

1,7741 gold badge23 silver badges27 bronze badges

Collectives™ on Stack Overflow

JSON objects and HTML tables

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related