5
22/10/2024 4:28 pm
Topic starter
Your task is to write a JS function that executes an AJAX request with jQuery and loads all user github repositories by a given username (taken from input field with id "username") into a list (each repository as a list-item) with id "repos". Use the properties full_name and html_url of the returned objects to create a link to each repo’s GitHub page. If an error occurs (like 404 “Not Found”), append to the list a list-item with text "Error" instead. Clear the contents of the list before any new content is appended.
HTML Skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GitHub Repos</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
GitHub username:
<input type="text" id="username" value="k1r1L" />
<button onclick="loadRepos()">Load Repos</button>
<ul id="repos">
<li>
<a href="{repo.html_url}">
{repo.full_name}
</a>
</li>
</ul>
<script>
function loadRepos() {
// AJAX call …
}
</script>
</body>
</html>
Example:
2 Answers
4
22/10/2024 4:30 pm
Here is the HTML + the solved function inside:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GitHub Repos</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body>
GitHub username:
<input type="text" id="username"/>
<button onclick="loadRepos()">Load Repos</button>
<ul id="repos">
<li>
<a href="{repo.html_url}">
{repo.full_name}
</a>
</li>
</ul>
<script>
function loadRepos() {
$("#repos").empty();
let url = "https://api.github.com/users/" +
$("#username").val() + "/repos";
$.ajax({
url,
success: displayRepos,
error: displayError
});
function displayRepos(respos) {
for (let repo of respos) {
let link = $('<a>').text(repo.full_name);
link.attr('href', repo.html_url);
$("#repos").append($('<li>').append(link));
}
}
function displayError(err) {
$("#repos").append($("<li>Error</li>"));
}
}
</script>
</body>
</html>
Only the function:
function loadRepos() {
$("#repos").empty();
let url = "https://api.github.com/users/" +
$("#username").val() + "/repos";
$.ajax({
url,
success: displayRepos,
error: displayError
});
function displayRepos(respos) {
for (let repo of respos) {
let link = $('<a>').text(repo.full_name);
link.attr('href', repo.html_url);
$("#repos").append($('<li>').append(link));
}
}
function displayError(err) {
$("#repos").append($("<li>Error</li>"));
}
}
3
22/10/2024 4:30 pm
Here is my function loadRepos():
function loadRepos() {
$("#repos").empty();
let username = $("#username").val();
$.get("https://api.github.com/users/" + username + "/repos")
.then(function (data) {
for (let repo of data) {
let link = $("<a>");
link.text(repo.full_name);
link.attr("href", repo.html_url);
link.attr("target", "_blank");
let li = $("<li>").append(link);
$("#repos").append(li);
}
})
.catch(function () {
$("#repos").append($("<li>Error</li>"));
});
}
