javascript - 如何显示 Github 存储库的贡献者

Question

我是 HTML CSS 和 js 的初学者，我正在尝试列出 Github 中存储库的贡献者 我已经使用 API 收集了 JSON 对象

https://docs.github.com/en/rest/reference/repos#list-repository-contributors

但我不知道如何在 div 中使用 HTML 列出所有内容

看看我的js文件:

const getUsers = () => {
    axios
        .get(
            "https://api.github.com/repos/{owner}/{repo}/contributors "
        )
        .then((response) => {
            const users = response.data;
            console.log(users);
            const h1 = document.querySelector(".name");
            h1.innerHTML = `${users[1].login}`;
        })
        .catch((error) => console.error(error));
};
getUsers();

这是我的数据对象的示例:

[
{
    "login": "bugron",
    "id": 13225220,
    "node_id": "MDQ6VXNlcjEzMjI1MjIw",
    "avatar_url": "https://avatars.githubusercontent.com/u/13225220?v=4",
    "gravatar_id": "",
    "url": "https://api.github.com/users/bugron",
    "html_url": "https://github.com/bugron",
    "followers_url": "https://api.github.com/users/bugron/followers",
    "following_url": "https://api.github.com/users/bugron/following{/other_user}",
    "gists_url": "https://api.github.com/users/bugron/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/bugron/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/bugron/subscriptions",
    "organizations_url": "https://api.github.com/users/bugron/orgs",
    "repos_url": "https://api.github.com/users/bugron/repos",
    "events_url": "https://api.github.com/users/bugron/events{/privacy}",
    "received_events_url": "https://api.github.com/users/bugron/received_events",
    "type": "User",
    "site_admin": false,
    "contributions": 297
}
]

我想获取登录值并将其显示在不同的div中

Answer 1

您可以使用array#map并提取所有 login并使用 array#join ，你可以加入这些login .

const getUsers = () => {
    const owner = 'fabpot',
          repo = 'symfony';
    axios
        .get(
            `https://api.github.com/repos/${owner}/${repo}/contributors`
        )
        .then((response) => {
            const users = response.data;
            const div = document.querySelector(".name");
            div.innerHTML = users.map(u => u.login).join('<br />');
        })
        .catch((error) => console.error(error));
};
getUsers();

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<div class="name"></div>