CODEWITHSUNDEEP
javascriptjsonfor-loop
Tara Butler
Tara Butler

Reputation: 3

JSON objects and HTML tables

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?

Upvotes: 0

Views: 98

Answers (4)

Skywalker
Skywalker

Reputation: 1774

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);
});

Upvotes: 0

Jashwant
Jashwant

Reputation: 28995

'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);
});

Upvotes: 0

Henrik Karlsson
Henrik Karlsson

Reputation: 5713

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);.

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

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);

Upvotes: 2

Related Questions