title: Retrieving Data Based on User Click Event with JSON API
body: <p>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:</p>
  
  <p><a href="https://randomuser.me/api/?results=12&amp;format=json" rel="nofollow noreferrer">https://randomuser.me/api/?results=12&amp;format=json</a></p>
  
  <p>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. <code>Console log</code> is saying <code>"Cannot read property 'cell' of undefined"</code>.  I'm pretty confident that this is due to the <code>displayModal</code> function not being able to access the data from the json call in the <code>'employees'</code> variable.  I've tried moving that function inside of the <code>$ajax</code> call where I'm retrieving the data, but that doesn't work--so not sure where to go from here.</p>
  
  <p><a href="https://jsfiddle.net/cdogstu99/dt48kxvs/2/" rel="nofollow noreferrer">jfiddle here</a></p>
  
  <pre><code>//Get JSON DATA and stored data in variable Employees.
  var employees;
  
  $.ajax({
      url: 'https://randomuser.me/api/?results=12&amp;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 += '&lt;div class="employee" employee-id="' + employee.id.value + '&gt;';
          employeesHTML += '&lt;a href=""&gt;';
          employeesHTML += '&lt;img class="employee-photo" src="' + employee.picture.large + '"&gt;&lt;/a&gt;';
          employeesHTML += '&lt;div class="info"&gt;';
          employeesHTML += '&lt;div class="name"&gt;'+ employee.name.first + ' ' + employee.name.last + '&lt;/div&gt;';
          employeesHTML += '&lt;div class="email grey-font"&gt;'+ employee.email + '&lt;/div&gt;';
          employeesHTML += '&lt;div class="city grey-font"&gt;' + employee.location.city + '&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
             });
  
      $('.employees').html(employeesHTML);
  
  };
  
  //Create Function to Build Modal
  function displayModal(employees, id){
      var employeesModal;
      //create modal
      employeesModal += '&lt;div&gt;' + employees[id].cell + '&lt;/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);
  </code></pre>