JSON объектов и HTML таблицы

Question

Первый раз плакат здесь и новички в JavaScript ...

Ниже мой объект JSON ...

[ 
    { 
     "Name":"Ted", 
     "EmailAddress":"ted@ted.edu", 
     "Title":"Director", 
     "Expertise":"Statistics", 
     "PhoneNumber":"444-444-4444" 
    }, 
    { 
     "Name":"Ann", 
     "EmailAddress":"ann@ann.edu", 
     "Title":"Director", 
     "Expertise":"Physics", 
     "PhoneNumber":"444-444-5555" 
    } 
] 

Что мне нужно, чтобы иметь возможность перебрать это добавьте каждую строку таблицы для каждого сотрудника. Есть пять значений: Имя, EMAILADDRESS, Название, Экспертиза, PHONENUMBER

Это то, что я до сих пор ...

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

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

//for loop goes here// 

Любая помощь будет оценен по достоинству!

РЕДАКТИРОВАТЬ: Также, как я могу сделать адрес электронной почты 'clickable'/'mail' адресу?

Answer 1

Простой цикл будет делать, вы должны также создать весь HTML строку, затем добавить:

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

Answer 2

Поскольку объекты JSON только нормальные объекты Javascript, вы можете рассматривать их как таковые.

Например, для того, чтобы петля над ними можно просто сделать нормальный цикл Javascript:

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

, а затем, чтобы получить доступ к информации от сотрудника, вы можете просто сделать employee.Name, чтобы получить доступ к его имя, employee.Title для названия и т.д.

используя информацию в employee.Name и других, вы можете просто строить свои строки, используя эту информацию:

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

, а затем, наконец, добавьте его с помощью $("#pager").append(str);.

Answer 3

'Добро пожаловать в StackOverflow и Javascript :)

Это на самом деле JavaScript Object (не объект JSON).

$(function() { 
 
    var Employees = [{ 
 
    "Name": "Ted", 
 
    "EmailAddress": "ted@ted.edu", 
 
    "Title": "Director", 
 
    "Expertise": "Statistics", 
 
    "PhoneNumber": "444-444-4444" 
 
    }, { 
 
    "Name": "Ann", 
 
    "EmailAddress": "ann@ann.edu", 
 
    "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); 
 
});

Answer 4

Вы используете JQuery. Тогда это должно быть примерно так:

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