Load more GitHub user followers with API

user_5574318 0
Viewed 390

I'm playing around with the GitHub API and trying to build a simple app that lets you search for a GitHub user which then returns a list of that user's followers. I'm currently displaying the first 100 followers and would like each button click to load the next batch of 100 followers until all followers have been returned.

Since I'm loading the max count displayed on each page (100), I can access the second page by including '&page=2' at the end of the url. I just don't know how to automatically load each new page until there are no more followers to load.

Any advice on how to accomplish this? Any help is much appreciated.

// Make request to Github
$.ajax({
  url:'https://api.github.com/users/'+username,
  data:{
    client_id:'9ecc0f206ecd34f2f552',
    client_secret:'6eee17df91630a531ea2acf49848dec408079e9c'
  }
}).done(function(user){
  $.ajax({
    url:'https://api.github.com/users/'+username+'/followers?per_page=100',
    data:{
      client_id:'9ecc0f206ecd34f2f552',
      client_secret:'6eee17df91630a531ea2acf49848dec408079e9c'
    }
  }).done(function(followers){
    $.each(followers, function(index, follower){
      $('#followers').append(`
        <div>
          <div class="row">
            <div class="col-md-10">
            <img class="follower-avatar" src="${follower.avatar_url}" alt="" />
            <p>${follower.login}</p>
            </div>
            <div class="col-md-2">
              <a href="${follower.html_url}" target="_blank" class="btn">View profile</a>
            </div>
          </div>
        </div>
      `);
    });
  });
  $('#profile').html(`
    <div>
      <div>
        <div class="row">
          <div class="col-md-3">
            <img  src="${user.avatar_url}">
            <div>
                <h3>${user.name}</h3>
            </div>
            <a target="_blank" class="btn" href="${user.html_url}">View Profile</a>
          </div>
          <div class="col-md-9">
          <div>
            <h1>Followers</h1> <br/>
            <p>${user.followers}</p>
          </div>
          <div>
            <h1>Followers</h1> <br/>
            <p>2313123</p>
          </div>
          </div>
        </div>
      </div>
    </div>
    <h3 class="page-header">${user.name}'s followers</h3>
    <div id="followers"></div>
  `);
});
github-api jquery ajax
1 Answers

By using a recursive function, we can continue requesting further pages of followers.

I moved some of your code into a function below called getFollowers that accepts a page number as a parameter. It's initially called with the page as 1, and if we notice that the AJAX result has the same number of rows as users we requested per page (i.e. our per_page is 100 and page 1 had 100 users), it's worth checking to see if there's a next page.

Then the function is called recursively with page incremented by 1. This will continue running until all of the pages are loaded (or your API rate limit is exceeded!).

Let me know if you have any questions.

(For demonstration purposes I found a random GitHub user with a moderate number of followers.)

EDIT: Per your comment and initial request, I've updated the code below to require a click of a button to load the next page.

var username = 'cartazio';
var nextPage;

// bind click event for button
$('#load').on('click', function() {
  getFollowers(nextPage);
});

// getFollowers function with one parameter - current page
function getFollowers(page) {

  // how many followers per page to retrieve
  perPage = 100;

  // update next page global variable
  nextPage = page + 1;

  $.ajax({
    url: 'https://api.github.com/users/' + username + '/followers?per_page=' + perPage + '&page=' + page,
    data: {
      client_id: '9ecc0f206ecd34f2f552',
      client_secret: '6eee17df91630a531ea2acf49848dec408079e9c'
    }
  }).done(function(followers) {
    $.each(followers, function(index, follower) {
      $('#followers').append(`
            <div>
              <div class="row">
                <div class="col-md-10">
                <img class="follower-avatar" src="${follower.avatar_url}" alt="" />
                <p>${follower.login}</p>
                </div>
                <div class="col-md-2">
                  <a href="${follower.html_url}" target="_blank" class="btn">View profile</a>
                </div>
              </div>
            </div>
          `);
    });

    // if the array returned has fewer people than we requested per page,
    // we've found all the followers. hide the button
    if (followers.length < perPage) {
      $('button').hide();
    }
  });
}

// Make request to Github
$.ajax({
  url: 'https://api.github.com/users/' + username,
  data: {
    client_id: '9ecc0f206ecd34f2f552',
    client_secret: '6eee17df91630a531ea2acf49848dec408079e9c'
  }
}).done(function(user) {
  // Get first page of followers
  getFollowers(1);
  // Profile HTML
  $('#profile').html(`
        <div>
          <div>
            <div class="row">
              <div class="col-md-3">
                <img  src="${user.avatar_url}">
                <div>
              <h3>${user.name}</h3>
            </div>
                <a target="_blank" class="btn" href="${user.html_url}">View Profile</a>
              </div>
              <div class="col-md-9">
              <div>
               <h1>Followers</h1> <br/>
               <p>${user.followers}</p>
              </div>
              <div>
               <h1>Followers</h1> <br/>
               <p>2313123</p>
              </div>
              </div>
            </div>
          </div>
        </div>
        <h3 class="page-header">${user.name}'s followers</h3>
        <div id="followers"></div>
      `);
});
#followers {
  counter-reset: users;
}

.col-md-10::before {
  counter-increment: users;
  content: counter(users);
  display: inline-block;
  width: 50px;
}

img {
  width: 40px;
}

p {
  display: inline-block;
  margin: 0 1em;
  width: 200px;
}

.row div {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="followers"></div>
<button id="load">Load More</button>
<div id="profile"></div>

user_45734100
Related