我是 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中显示
答案 0 :(得分:2)
您可以使用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>