如何創建Github Repo查看器？

Question

我正在創建一個Web應用程序，在那裏我想用JQuery創建一個Github Repo查看器& Ajax。基本上，我想要這樣做

1. 附加一個「點擊」事件處理程序的按鈕。
2. 抓鬥從文本
3. 在用戶名的用戶名，創建GitHub的API URL，並將其存儲在一個名爲APIUrl
4. 使用AJAX功能調用API的變量。
5. 循環訪問數據並將數據附加到帶有結果標識的div。
6. 使用空函數從結果div中清除以前的數據。

這裏是我的代碼：

var username, 

    APIUrl = "https://api.github.com/users/", 

    theApiUrl; 

$('#submit').on("click", function(eventHandler) { 

    username = $("#username").val(); 
    eventHandler.preventDefault(); 
    theApiUrl = APIUrl + username; 

    $.getJSON(theApiUrl, function(pico) { 

    document.getElementById("img").src = pico.avatar_url; 
    console.log(pico); 

    }) 
}) 

我可以理解，如果任何人能幫助我。

Answer 1

我不知道有多少來自回購的數據要撤回，但這應該足以讓您在jQuery中開始使用它。

在第一次GET調用的回覆中，您可以通過response.repos_url或您的案例獲得回購網址，pico.repos_url。所以你所要做的就是做另一個GET，循環遍歷結果，並追加你想要的視圖。

的Javascript：

var username, 

APIUrl = "https://api.github.com/users/", 

theApiUrl; 

$('#submit').on("click", function(eventHandler){ 

username = $("#username").val(); 
eventHandler.preventDefault(); 
theApiUrl = APIUrl + username; 

    $.getJSON(theApiUrl, function(pico){ 

     document.getElementById("img").src = pico.avatar_url; 

     $.getJSON(pico.repos_url, function(repos){ 
      //console.log(repos); 
      for (var i = 0; i < repos.length; i++) { 
      $("#repos").append("<div>Name: " + repos[i].name + "<br />Description: " + repos[i].description + "<br/><br />"); 
      } 

     }); 
    }); 
}); 

HTML：

<input id="username"> 
<button id="submit">submit</button> 
<br /> <br /> 
<img id="img"> 
<br /> 
<div id="repos"></div> 

這裏是一個小提琴：https://jsfiddle.net/bnrnk827/