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

Question

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

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

我已成功检索并显示了充满示例员工的页面。但是，如果用户单击记录，我在显示个人记录(通过模式)时遇到问题。 控制台日志显示“无法读取未定义的属性‘cell’”。我非常确信这是由于 displayModal 函数无法从 'employees' 变量中的 json 调用访问数据造成的。我尝试将该函数移动到要检索数据的 $ajax 调用中，但这不起作用 - 所以不确定从这里该去哪里。

jfiddle here

//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即可正确显示。