使用 JSON API 根据用户点击事件检索数据

Question

我正在使用AJAX/jQuery利用随机用户员工目录API构建员工目录。 这是我使用的实际数据馈送：

https://randomuser.me/api/?results=12&format=json

我已经成功检索并显示了一个充满示例员工的页面。 但是，如果用户单击记录，我在显示个人记录（通过模态）时遇到了问题。 Console log说"Cannot read property 'cell' of undefined". 我很有信心这是由于 displayModal 函数无法访问 'employees' 变量中 json 调用的数据。 我尝试将该函数移动到我检索数据的$ajax调用中，但这不起作用 - 所以不确定从这里开始。

在这里 jfiddle

//Get JSON DATA and stored data in variable Employees.
var employees;
$.ajax({
    url: 'https://randomuser.me/api/?results=12&format=json',
    success: function(data){
        employees = data.results;
        displayEmployees(employees);
        console.log(employees);
    }
});
//Create Function to Build Employee Car
function displayEmployees(employees){
    var employeesHTML = ""
    $.each(employees, function(i, employee) {
        employeesHTML += '<div class="employee" employee-id="' + employee.id.value + '>';
        employeesHTML += '<a href="">';
        employeesHTML += '<img class="employee-photo" src="' + employee.picture.large + '"></a>';
        employeesHTML += '<div class="info">';
        employeesHTML += '<div class="name">'+ employee.name.first + ' ' + employee.name.last + '</div>';
        employeesHTML += '<div class="email grey-font">'+ employee.email + '</div>';
        employeesHTML += '<div class="city grey-font">' + employee.location.city + '</div></div></div>';
           });
    $('.employees').html(employeesHTML);
};
//Create Function to Build Modal
function displayModal(employees, id){
    var employeesModal;
    //create modal
    employeesModal += '<div>' + employees[id].cell + '</div';
    $('.modal-text').html(employeesModal);
}
//Click Event To Display Modal
var modal = document.getElementById('myModal');
$('.employees').on("click", ".employee", function() {
    $.each(employees, function(i, employee) {
        var id = $(this).attr('employee-id');
        modal.style.display = "block";
        displayModal(employees, id);
        console.log('click');
    });
});
// // When the user clicks on (x), close the modal
$('.close').on("click", function() {
    modal.style.display = "none";
});
// // When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

console.log(employees);

Answer 1

试试这个。

//Get JSON DATA and stored data in variable Employees.
var employees;
$.ajax({
    url: 'https://randomuser.me/api/?results=12&format=json',
    success: function(data){
    	employees = data.results;
    	displayEmployees(employees);
	}
});
//Create Function to Build Employee Car
function displayEmployees(employees){
	var employeesHTML = ""
	$.each(employees, function(i, employee) {
		employeesHTML += '<div class="employee">';
	    employeesHTML += '<a href="">';
	    employeesHTML += '<img class="employee-photo" src="' + employee.picture.large + '"></a>';
	    employeesHTML += '<div class="info">';
	    employeesHTML += '<div class="name">'+ employee.name.first + ' ' + employee.name.last + '</div>';
	    employeesHTML += '<div class="email grey-font">'+ employee.email + '</div>';
	    employeesHTML += '<div class="city grey-font">' + employee.location.city + '</div></div></div>';
	       });
    $('.employees').html(employeesHTML);
};
//Create Function to Build Modal
function displayModal(employees){
	var employeesModal="";
	//create modal
    employeesModal += '<div>' + $(employees).html() + '</div>';
    $('.modal-text').html(employeesModal);
}
//Click Event To Display Modal
var modal = document.getElementById('myModal');
$('.employees').on("click", ".employee", function() {
	  var current = $(this);
	    modal.style.display = "block";
	    displayModal(current);
});
// // When the user clicks on (x), close the modal
$('.close').on("click", function() {
    modal.style.display = "none";
});
// // When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

body {
    background-color: #fcfcfc;
    font-size:12px;
    font-family: 'Roboto'; font-size:12px;
    color:gray;
}
ul {
    list-style:none;
}
.employees {
  /* We first create a flex layout context */
  display: flex;
  /* Then we define the flow direction
     and if we allow the items to wrap
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
  width:100%;
  margin-left: 30px;
}
.title {
  width: 100%;
  text-align: left;
  margin-left: 82px;
  margin-top:20px;
  font-weight:bold;
  font-size:14px;
  }
.employee {
  background: #ffffff;
  position: relative;
  padding: 5px;
  width: 350px;
  height: 150px;
  margin-top: 20px;
  font-size: 11px;
  color:black;
  line-height: 150px;
  font-weight: bold;
  text-align: center;
  border: 1px solid #D3D3D3;
  border-radius: 7px;
  }
.info {
    float:right;
    display: block;
    font-size:12px;
    width:40%;
    height: 150px;
    position:absolute;
    top: -14%;
    left: 47%;
    text-align: left;
    }
.employee-photo{
  float: left;
  border-radius: 50%;
  position: absolute;
  margin: 10px -159px;
}
.name{height:30px; font-size:15px;}
.email{height:30px;}
.city{height: 30px}
.grey-font{
  color: #888;
  font-size: 12px;
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 25%;
    height: 60%; 
    position:absolute;
    top:-25%;
    left:38%;
    border-radius: 7px;
    /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
    <link rel="stylesheet" href="css/style.css">
      
<body>
<div class="title">AWESOME STARTUP EMPLOYEE DIRECTORY</div>
<div class="employees">
</div>
<!-- Set Div For Modal -->
<div id="myModal" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<span class="close">&times;</span>
<div class="modal-text">Some text in the Modal..</div>
</div>
</div>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>

只需修改 css 即可正确显示。