如何显示 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>