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 += `
      
        
          
            ${name}
            ${username}
            ${email}
            ${phone}
            ${company}
          
        
      `
    , ``);
    $('#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 += `
                
                    
                        ${name}
                        ${username}
                        ${email}
                        ${phone}
                        ${company}
                    
                `
            , ``);
        $('#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("");
});

Any help would be greatly appreciated!

Thanks a lot, Steve.

Oleksandr Sakun · Accepted Answer

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 += `
      
        
          
            ${name}
            ${username}
            ${email}
            ${phone}
            ${company}
          
        
      `),
    ``
  );
  $("#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 = `
      
          
              User not found
          
      `;

    if (selectedUserData) {
      userModal = `
              
                  
                      ${selectedUserData.name}
                      ${selectedUserData.username}
                      ${selectedUserData.email}
                      ${selectedUserData.phone}
                      ${selectedUserData.company}
                  
              `;
    }
    $("#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("");
});



  
    Parcel Sandbox

Link Dynamic Div to Dynamic Modal

Answers (2)

Related Questions