Github API - 在Angular2中获得追随者的信徒

Question

如何显示追随者的追随者人数？

我现在设置的内容： 输入Github用户名的字段（输入），当点击按钮时，用户的所有追随者将在下面列出。追随者用户名&追随者ID已显示，但我也想显示追随者的追随者数量。

图片更好地了解什么我在寻找的： SCREENSHOT

github上，profile.component.ts

import {Component} from 'angular2/core'; 
 
import {HTTP_PROVIDERS} from 'angular2/http'; 
 
import {Observable} from 'rxjs/Observable'; 
 
import 'rxjs/add/observable/forkJoin'; 
 

 
import {GitHubService} from './github.service'; 
 

 
@Component({ 
 
    selector: 'github-profile', 
 
    styles: [ 
 
     ` 
 
      /*noinspection CssInvalidPropertyValue*/.avatar { 
 
       width: 100; 
 
       height: 100; 
 
       border-radius: 100%; 
 
      } 
 
     ` 
 
    ], 
 
    template: ` 
 
     <i *ngIf="isLoading" class="fa fa-spinner fa-spin fa-3x"></i> 
 
    <form #f="ngForm" class="animated fadeInRight"> 
 
     <div class="form-group"> 
 
      <label for="name">Follower finder</label> 
 
      <input ngControl="username" 
 
        #username="ngForm" 
 
        [(ngModel)] = "inputusr" 
 
        type="text" 
 
        class="form-control" 
 
        placeholder="Enter GitHub username" 
 
        required 
 
        minlength="3"> 
 
        <div *ngIf="username.touched && username.errors"> 
 
         <div *ngIf="username.errors.required" 
 
          class="alert alert-danger"> 
 
          Username is required. 
 
         </div> 
 
         <div class="alert alert-danger" 
 
          *ngIf="username.errors.minlength"> 
 
          First name should be minimum 3 characters. 
 
         </div> 
 
        </div> 
 

 
     </div> 
 
     <button (click)=OnClick($event) type="submit" class="btn btn-default" [disabled]="!f.valid">Search</button>\ 
 
     <button type="submit" class="btn btn-danger" (click)=ClearResults($event)>Clear</button> 
 
    </form> 
 
    <h3 *ngIf="isVisible">@{{user.login}} aka {{user.name}}</h3> 
 
     <img *ngIf="isVisible" class="avatar" src="{{ user.avatar_url }}"> 
 
     <h3 *ngIf="isVisible">Followers</h3>  
 
     <div *ngIf="isVisible" class="row"> 
 
      <div *ngFor="#follower of followers" class="col-sm-3 animated fadeInRight"> 
 
      <div class="thumbnail"> 
 
       <img *ngIf="isVisible" src="{{ follower.avatar_url }}" alt="..."> 
 
       <div class="caption"> 
 
       <a href="{{ follower.html_url }}" target="_blank"><h4 class="text-center">{{ follower.login }}</h4></a> 
 
       <p class="text-center">User ID: {{ follower.id }}</p> 
 
       <p class="text-center">Followers: Show followers of a follower here.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    `, 
 
    providers: [HTTP_PROVIDERS, GitHubService] 
 
}) 
 

 
export class GitHubProfileComponent { 
 

 
    inputusr: string; 
 
    isVisible = false; 
 
    isLoading = false; 
 
    username: string; 
 
    user = {}; 
 
    followers = {}; 
 

 
    constructor(private _gitHubService: GitHubService){ 
 
    } 
 

 
    ClearResults($event){ 
 
     this.isVisible = false; 
 
     this.inputusr = ""; 
 
    } 
 

 
    OnClick($event){ 
 
     this.isLoading = true; 
 
     this.username = this.inputusr; 
 

 
     Observable.forkJoin(
 
      this._gitHubService.getUser(this.username), 
 
      this._gitHubService.getFollowers(this.username) 
 
     ) 
 
      .subscribe(
 
       res => { 
 
        this.user = res[0]; 
 
        this.followers = res[1]; 
 
       }, 
 
       null, 
 
       () => { this.isLoading = false; this.isVisible = true; }) 
 
    } 
 
}

github.service.ts

import {Injectable} from 'angular2/core'; 
 
import {Http} from 'angular2/http'; 
 
import {Observable} from 'rxjs/Observable'; 
 
import 'rxjs/add/operator/map'; 
 

 
@Injectable() 
 
export class GitHubService { 
 
    private _baseUrl = "https://api.github.com/users/"; 
 

 
    constructor(private _http: Http){} 
 

 
    getUser(username){ 
 
     return this._http.get(this._baseUrl + username) 
 
      .map(res => res.json()); 
 
    } 
 

 
    getFollowers(username){ 
 
     return this._http.get(this._baseUrl + username + "/followers") 
 
      .map(res => res.json()); 
 
    } 
 

 
}

Answer 1

在https://api.github.com/users/odetocode的回应中有一个名为“追随者”的钥匙，这是您所需要的。

如果您需要用户的每个追随者的基本细节，可以使用以下方法。

URL https://api.github.com/users/:username/followers基本上返回一个对象数组，每个对象表示一个跟随者。

响应中返回的条目数有上限30个。

解决方法

所以基本上以获取我们可以追加到URL查询字符串参数?page=1，?page=2等更多的用户。

检查响应，直到array的长度= 0; 这将给你最后一页，直到哪些追随者存在。

然后统计最后一页中关注者的数量。

例如：我有340名追随者

所以响应为https://api.github.com/users/:username/followers?page=13将和长度的阵列0

然后发送对https://api.github.com/users/:username/followers?page=12的请求将返回长度10

计数的阵列追随者：（3​​0 * 11）+（10 * 1）= 340