Retrieving Data Based on User Click Event with JSON API

Question

I'm building an employee directory using AJAX/jQuery leveraging the Random User Employee Directory API. This is the actual data feed i'm using:

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

I have successfully retrieved and displayed a page full of sample employees. But I'm having an issue in showing an individual's record (via modal) if a user clicks on a record. Console log is saying "Cannot read property 'cell' of undefined". I'm pretty confident that this is due to the displayModal function not being able to access the data from the json call in the 'employees' variable. I've tried moving that function inside of the $ajax call where I'm retrieving the data, but that doesn't work--so not sure where to go from here.

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

var id = $(this).attr('data-id'); is returning NaN so it cannot find the employee by index because NaN won't work — Sgnl
– Sgnl, Commented Oct 10, 2017 at 0:42
It doesn't look like that attribute is being set when you build the HTML elements — Sgnl
– Sgnl, Commented Oct 10, 2017 at 0:45
If you're going to use data, use jQuery's data method: api.jquery.com/data — Sgnl
– Sgnl, Commented Oct 10, 2017 at 0:46
If you could update your fiddle please, otherwise try this: using parseInt(id) because values coming out of the DOM are always strings — Sgnl
– Sgnl, Commented Oct 10, 2017 at 1:12
ok thx updated fiddle here: jsfiddle.net/cdogstu99/dt48kxvs/2 — John Rogerson
– John Rogerson, Commented Oct 10, 2017 at 1:16

Shadow Fiend · Accepted Answer · 2017-10-10 01:13:02Z

1

Try this.

//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>

Just modify the css to display it right.

answered Oct 10, 2017 at 1:13

Shadow Fiend

1,8291 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

John Rogerson Over a year ago

very cool--the one question i have: In the modal I actually have to display some other fields from the JSON data that are not on the main employee card. how exactly can i do that here? for example i tried $(employees.phone).html() but get an undefined

Shadow Fiend Over a year ago

what is phone?.

John Rogerson Over a year ago

phone number (just a test variable for now) but can see field here randomuser.me/api/?results=12&format=json

Shadow Fiend Over a year ago

when you get the json data do you also insert the phone to an element?

John Rogerson Over a year ago

no was just storing all of the employees like this: employees = data.results;

|

Collectives™ on Stack Overflow

Retrieving Data Based on User Click Event with JSON API

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related