Chaining then() and accessing data in JavaScript

Question

Hi all I'm learning javascript for some few months now and trying to write my first, not trivial app and came across this problem. this is sample of my 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>
        `);

    });
  });
});

My questions are how do I bind event handlers for each userPanel , and is there a way to sort them by amount of contributions or gists?

Answer 1

As per the W3C standard,ID should not be duplicate.

So,use class="userPanel" instead of 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 appending

$.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>          
                            `);

        });