Question

我正在尝试制作一个GitHub个人资料搜索器，而我正在尝试做的是：

获取用户头像
获取用户名
获取用户存储库

我遇到了最后一个问题。

我无法弄清楚如何根据用户回购数量创建UL。

我有什么HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Github Profile Searcher</title>
    <link rel="stylesheet" href="github-profile.css" />
</head>
<body>
    <div id="username-input" class="username-input">
        Username:
        <input class="username-input-text" type="text" />
    </div>

    <div id="github-profile" class="github-profile">
        <div class="github-profile-avatar">
            <span class="github-profile-username">mmckalan</span>
        </div>
        <div class="github-profile-name">       
            Alan Mac Cormack
        </div>
        <div class="github-profile-location">
            Napoli,NA
        </div>
        <div class="github-profile-stats">
            <div class="github-profile-stat">
                <i class="icon github-icon-repo" /></i>
                <span id = "github-profile-repo-count" class="github-profile-repo-count">50</span>
            </div>
            <div class="github-profile-stat">
                <i class="icon github-icon-gist" /></i>
                <span class="github-profile-gist-count">12</span>
            </div>          
        </div>
    </div>
    <script src="github-profile.js"></script>
</body>

JS：

var usernameInput = document.querySelector('#username-input .username-input-text');

 var emptyUser = {
        login: "",
        name: "",
        location: "",
        public_repos: "",
        public_gists: "",
        avatar_url: "notfound.png"
};

usernameInput.addEventListener('change', function(event){
var ghReq = new XMLHttpRequest();
ghReq.addEventListener("load", updateProfileBadge);
ghReq.open("GET", "https://api.github.com/users/" + usernameInput.value);
ghReq.send();
});

function updateProfileBadge() {
var response = JSON.parse(this.reponseText);
if (response.message === "Not Found") {
    updateDomWithUser(emptyUser);
} else {
    updateDomWithUser(response);
}
}

function updateDomWithUser(user) {
var profile = document.getElementById('github-profile');
profile.querySelector('.github-profile-username').innerText = user.login;
profile.querySelector('.github-profile-name').innerText = user.name;
profile.querySelector('.github-profile-location').innerText = user.location;
profile.querySelector('.github-profile-repo-count').innerText = 
user.public_repos;
profile.querySelector('.github-profile-gist-count').innerText = 
user.public_gists;
profile.querySelector('.github-profile-avatar')
       .style.backgroundImage = "url(" + user.avatar_url + ")";
}


updateDomWithUser(emptyUser);

var quantity = document.getElementById('github-profile-repo-count');

var ul = document.createElement("ul");
document.body.appendChild(ul);

我想做的事情是这样的：

LI的数量基于 user.public_repos

给出的数字

但它必须符合用户回购数量，所以我不知道如何解决它。

你可以帮我一把吗？

Answer 1

据我所知，致电“https://api.github.com/users/NAME”只会给你一些公共信息，而不是名字或星号。为此，您需要调用“https://api.github.com/users/NAME/repos” - 它可能会在第一次调用后被链接。

但是，创建没有数据的X列表元素非常简单：

var ul = document.createElement("ul");
document.body.appendChild(ul);
for (var i = 0; i < user.public_repos; i++) {
  var li = document.createElement("li");
  li.textContent = 'example text';
  ul.appendChild(li)
}

或者，如果您将以数组的形式获取repos数据：

var ul = document.createElement("ul");
document.body.appendChild(ul);
repos.forEach((repo)=>{
  var li = document.createElement("li");
  li.textContent = repo.name;
  ul.appendChild(li)
})

另一件事 - 最好写

public_repos: 0,

比空字符串。

Answer 2

要创建repos列表，您只需循环遍历/users/{my_user}/repos返回的JSON数据。在您的情况下，您需要两个Ajax调用：

第一个为您提供有关用户的信息
第二个为您提供有关用户回购的信息

以下是我的存储库的最小工作示例：

function get(endpoint, callback) {
  var req = new XMLHttpRequest();

  req.onreadystatechange = function () {
    if (this.readyState === XMLHttpRequest.DONE) {
      if (this.status === 200) {
        var data = JSON.parse(this.responseText);
        callback(data);
      } else {
        console.log(this.status, this.statusText);
      }
    }
  };
  
  req.open('GET', 'https://api.github.com' + endpoint, true);
  req.send(null);
}

function handleUser(data) {
  var html = '';
  html += '<li>' + data.login + '</li>';
  html += '<li>' + data.name + '</li>';
  document.querySelector('#user > ul').innerHTML = html;
  
  get('/users/Badacadabra/repos', handleUserRepos);
}

function handleUserRepos(data) {
  var html = '';
  for (var i = 0; i < data.length; i++) {
    html += '<li>' + data[i].name + '</li>';
  }
  document.querySelector('#repos > ul').innerHTML = html;
}

get('/users/Badacadabra', handleUser);

<div id="user">
  <ul></ul>
</div>
<hr>
<div id="repos">
  <ul></ul>
</div>

如何根据数组编号创建<ul>

2 个答案: