Chaining dann() und Zugriff auf Daten in JavaScript

Question

Hallo all, ich lerne Javascript seit ein paar Monaten jetzt und versuche, meine erste, nicht trivial App zu schreiben und stieß auf dieses Problem. Dies ist ein Beispiel meines Code:

$(document).ready(function() { 
    let contributorsArr = []; 
    let url = 'https://api.github.com/repos/angular/angular'; 
    let usersArr = []; 
    fetch(url).then(response => response.json()).then(data => { 
    let auth = ''; 
    contributorsArr = data.map(item => { 
     let contributions = item.contributions; 
     let id = item.id; 
     return {id, contributions}; 
    }); 


    const userUrls = data.map(item => item.url + auth); 
    const users = userUrls.map(userUrl => fetch(userUrl)); 
    return Promise.all(users); 

    }).then(responses => { 
    return Promise.all(responses.map(user => user.json())); 
    }).then(users => { 
    contributorsArr.forEach(function(obj1) { 
     users.forEach(function(obj) { 
     if (obj1.id === obj.id) { 
      Object.assign(obj, obj1); 
     } 
     }); 
     return users; 
    }); 

    usersArr.push(users); 

    $.each(users, function (index,user) { 
     let that = this; 

     $('#users').on('click','#userPanel',function (user) { 
     console.log(that.id); 
     }); 

     $('#users').append(` 
     <div id="userPanel" class="panel panel-default"> 
     <div class="panel-heading"> 
     <h3 class="panel-title">${user.name ? user.name : user.login}</h3> 
     </div> 
     <div class="panel-body"> 
     <div class="row"> 
     <div class="col-md-3 "> 
     <img class="thumbnail avatar" src="${user.avatar_url}" alt="avatar"> 
     <a target="_blank" class="btn btn-primary btn-block" href="${user.html_url}">View Profile on GitHub</a> 
     </div> 

     <div class="col-md-9"> 
     <span class="label label-default">Public Repos: ${user.public_repos} </span> 
     <span class="label label-primary">Public Gists: ${user.public_gists}</span> 
     <span class="label label-success">Contributions: ${user.contributions}</span> 
     <span class="label label-info">Followers: ${user.followers}</span> 
     </div> 
     </div> 
     </div> 
     </div> 
     `); 

    }); 
    }); 
}); 

Meine Fragen sind, wie ich für jeden Userpanel Ereignishandler binden, und gibt es einen Weg, um sie von den zu entrichtenden Beiträgen oder lügt zu sortieren?

Answer 1

Gemäß dem W3C-Standard sollte die ID nicht dupliziert werden.

So verwenden class="userPanel" statt id="userPanel"

$('#users').on('click','.userPanel',function (user) { 
       console.log(this); //using this u can traversee= up-down 
      });//move it to outside of each. 

Actual DOM

$.each(users,function (index,user) { 
      let that = this; 

      $('#users').append(` 
        <div class="userPanel" class="panel panel-default"> 
         <div class="panel-heading"> 
         <h3 class="panel-title">${user.name ? user.name : user.login}</h3> 
         </div> 
         <div class="panel-body"> 
         <div class="row"> 
          <div class="col-md-3 "> 
           <img class="thumbnail avatar" src="${user.avatar_url}" alt="avatar"> 
           <a target="_blank" class="btn btn-primary btn-block" href="${user.html_url}">View Profile on GitHub</a> 
          </div> 

          <div class="col-md-9"> 
          <span class="label label-default">Public Repos: ${user.public_repos} </span> 
          <span class="label label-primary">Public Gists: ${user.public_gists}</span> 
          <span class="label label-success">Contributions: ${user.contributions}</span> 
          <span class="label label-info">Followers: ${user.followers}</span> 
          </div> 
         </div> 
         </div> 
        </div>   
          `); 

     });