もっとGitHubユーザーのフォロワーをAPIでロードする

Question

私はGitHub APIで遊んでいて、そのユーザーのフォロワーのリストを返すGitHubユーザーを検索するためのシンプルなアプリケーションを構築しようとしています。私は現在、最初の100人のフォロワーを表示しており、すべてのフォロワーが返されるまで、100人のフォロワーの次のバッチをロードするために各ボタンをクリックしたいと考えています。

各ページ（100）に表示される最大カウントがロードされているので、URLの最後に '&ページ= 2'を含めて2番目のページにアクセスできます。ロードするフォロワーがなくなるまで、新しいページを自動的にロードする方法はわかりません。

これを達成するためのアドバイスはありますか？どんな助けでも大歓迎です。

// 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> 
    `); 
}); 

Answer 1

再帰関数を使用することで、引き続きフォロワーのページを要求できます。

コードの一部をgetFollowersという名前の関数に移動し、pageという数値をパラメータとして使用しました。最初は1というページで呼び出され、AJAXの結果が1ページあたりにリクエストしたユーザーの行数と同じであることがわかりました（つまり、per_pageは100、ページ1は100ユーザーです）。次のページ。

pageを1つ増やして関数を再帰的に呼び出します。これは、すべてのページが読み込まれるまで（またはAPIレートの上限を超えて）実行され続けます。

質問がある場合はお知らせください。

（デモの目的のために、私は信者の適度な数のランダムGitHubのユーザーを見つけました。）

EDIT：あなたのコメントと最初のリクエスト毎の、私はAのクリックを必要とするために、次のコードを更新しましたボタンを押して次のページを読み込みます。

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> 
 
      \t \t <h3>${user.name}</h3> 
 
      \t \t </div> 
 
       <a target="_blank" class="btn" href="${user.html_url}">View Profile</a> 
 
       </div> 
 
       <div class="col-md-9"> 
 
       <div> 
 
       \t <h1>Followers</h1> <br/> 
 
       \t <p>${user.followers}</p> 
 
       </div> 
 
       <div> 
 
       \t <h1>Followers</h1> <br/> 
 
       \t <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>