Link Dynamic Div to Dynamic Modal

Question

I have a dynamically generated "user grid" and a dynamically generated "user modal". The modal is triggered when a "user card" is clicked (this functionality is working great).

However, when clicking on a specific "user card"... it does not just load the selected user card info, but it loads all of the user data for all of the user cards...

Essentially, I would like to click the "Leanne Graham Card" and only display the "Leanne Graham Modal" content.

Have included the code below

//THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
var userJSON = 'https://captain-steve.github.io/demo/db.json'

//THIS IS THE CODE TO FETCH EXTERNAL JSON FILE
$.getJSON(userJSON, function (populateUsers) {

  //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL USER GRID
  var userCard = populateUsers.reduce((acc, {id, name, username, email, phone, company,}) =>
        acc += `
      <div class='col col-4 align-items-stretch strain-container'>
        <div id="${id}" class="card user-card">
          <div class="card-body">
            <h2 class="title">${name}</h2>
            <h6 class="title">${username}</h6>
            <h6 class="title">${email}</h6>
            <h6 class="title">${phone}</h6>
            <h6 class="title">${company}</h6>
          </div>
        </div>
      </div>`
    , ``);
    $('#user-grid').append(userCard)
});


//THIS IS THE CODE TO RUN WHEN USER CARD IS CLICKED
$('#user-grid').on('click', '.user-card', function(e){

    //THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
    var userJSON = 'https://captain-steve.github.io/demo/db.json'

    //THIS IS THE CODE TO FETCH EXTERNAL JSON FILE
    $.getJSON(userJSON + "?id=" + e.currentTarget.id, function (populateUserModal) {

        //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL MODAL
        var userModal = populateUserModal.reduce((acc, {id, name, username, email, phone, company,}) =>
            acc += `
                <div id="${id}" class="card user-card">
                    <div class="card-body">
                        <h2 class="title">${name}</h2>
                        <h6 class="title">${username}</h6>
                        <h6 class="title">${email}</h6>
                        <h6 class="title">${phone}</h6>
                        <h6 class="title">${company}</h6>
                    </div>
                </div>`
            , ``);
        $('#modal-content').append(userModal)
    });
    $('#user-modal').modal({show:true});
});

//THIS IS THE CODE TO CLEAR ALL THE JSON DATA WHEN MODAL IS CLOSED
$("#user-modal").on("hidden.bs.modal", function(){
    $("#modal-content").html("");
});

<!-- Scripts & Sheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Modal -->
<div id="user-modal" class="user-modal modal fade" tabindex="-1" role="dialog" aria-labelledby="uder-card" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div id="modal-content">

        </div>
    </div>
</div>


<!-- User Grid -->
<div id="user-grid" class="row container fluid-container"></div>    

Any help would be greatly appreciated!

Thanks a lot, Steve.

Answer 1

Event object contains currentTarget property which refers to clicked item. You can use it in order to extract clicked item id.

Then you just need find the user by id in json you got

//THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
var userJSON = "https://captain-steve.github.io/demo/db.json";
//THIS IS THE CODE TO FETCH EXTERNAL JSON FILE
window.$.getJSON(userJSON, function (populateUsers) {
  //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL USER GRID
  var userCard = populateUsers.reduce(
    (acc, { id, name, username, email, phone, company }) =>
      (acc += `
      <div class='col col-4 align-items-stretch strain-container'>
        <div id="${id}" class="card user-card">
          <div class="card-body">
            <h2 class="title">${name}</h2>
            <h6 class="title">${username}</h6>
            <h6 class="title">${email}</h6>
            <h6 class="title">${phone}</h6>
            <h6 class="title">${company}</h6>
          </div>
        </div>
      </div>`),
    ``
  );
  $("#user-grid").append(userCard);
});

//THIS IS THE CODE TO RUN WHEN USER CARD IS CLICKED
$("#user-grid").on("click", ".user-card", function (e) {
  //THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
  var userJSON = "https://captain-steve.github.io/demo/db.json";
  //THIS IS THE CODE TO FETCH EXTERNAL JSON FILE
  $.getJSON(userJSON, function (users) {
    const selectedUserId = e.currentTarget.id;
    const selectedUserData = users.find(
      (user) => user.id === Number(selectedUserId)
    );

    //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL MODAL
    let userModal = `
      <div id="${selectedUserData.id}" class="card user-card">
          <div class="card-body">
              <h2 class="title">User not found</h2>
          </div>
      </div>`;

    if (selectedUserData) {
      userModal = `
              <div id="${selectedUserData.id}" class="card user-card">
                  <div class="card-body">
                      <h2 class="title">${selectedUserData.name}</h2>
                      <h6 class="title">${selectedUserData.username}</h6>
                      <h6 class="title">${selectedUserData.email}</h6>
                      <h6 class="title">${selectedUserData.phone}</h6>
                      <h6 class="title">${selectedUserData.company}</h6>
                  </div>
              </div>`;
    }
    $("#modal-content").append(userModal);
  });
  $("#user-modal").modal({ show: true });
});

//THIS IS THE CODE TO CLEAR ALL THE JSON DATA WHEN MODAL IS CLOSED
$("#user-modal").on("hidden.bs.modal", function () {
  $("#modal-content").html("");
});

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
      type="text/javascript"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>

    <!-- Modal -->
    <div
      id="user-modal"
      class="user-modal modal fade"
      tabindex="-1"
      role="dialog"
      aria-labelledby="uder-card"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div id="modal-content"></div>
      </div>
    </div>

    <!-- User Grid -->
    <div id="user-grid" class="row container fluid-container"></div>
    <script src="src/index.js"></script>
  </body>
</html>