如何使用键和值遍历json数组数据

时间:2019-05-25 17:33:45

标签: jquery arrays json

{
"Employees" : [
{
"userId":"rirani",
"jobTitleName":"Developer",
"firstName":"Romin",
"lastName":"Irani",
"preferredFullName":"Romin Irani",
"employeeCode":"E1",
"region":"CA",
"phoneNumber":"408-1234567",
"emailAddress":"romin.k.irani@gmail.com"
},
{
"userId":"nirani",
"jobTitleName":"Developer",
"firstName":"Neil",
"lastName":"Irani",
"preferredFullName":"Neil Irani",
"employeeCode":"E2",
"region":"CA",
"phoneNumber":"408-1111111",
"emailAddress":"neilrirani@gmail.com"
},
{
"userId":"thanks",
"jobTitleName":"Program Directory",
"firstName":"Tom",
"lastName":"Hanks",
"preferredFullName":"Tom Hanks",
"employeeCode":"E3",
"region":"CA",
"phoneNumber":"408-2222222",
"emailAddress":"tomhanks@gmail.com"
}
]
}
  

我想使用jquery将此json数据显示为html。我正在执行此操作,但不会发生,它使我有时[object,object]。我想在循环的3 div中打印所有3个数据名称。

$(document).ready(function(){
$.getJSON('https://gist.githubusercontent.com/rominirani/8235702/raw/a50f7c449c41b6dc8eb87d8d393eeff62121b392/employees.json', function(data) {    
json = data;
var profile = '';
$.each(json, function(key, value){
profile += '<div class="col-sm-12 profile-inner no-pad-lf">';
profile +=              '<div class="col-sm-12 profile-header no-pad-lf">';
profile +=                '</div>';
profile +=                '<div class="col-sm-12 profile-info text-center">';
profile +=                  '<img src="https://cdn1.iconfinder.com/data/icons/technology-devices-2/100/Profile-512.png" class="img-responsive">';
profile +=                  '<h3>' + key + '</h3>';
profile +=                  '<p><i class="fas fa-map-marker-alt"></i> ' + value + '</p>';
profile +=                  '<hr>';
profile +=              '</div>';
$('.profile-main').html(profile);
});

JSON的在线链接:https://gist.githubusercontent.com/rominirani/8235702/raw/a50f7c449c41b6dc8eb87d8d393eeff62121b392/employees.json

0 个答案:

没有答案