settingsAccountsettings
Menusettings

Q: Github Repos (task with AJAX and jQuery)

+4 votes

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:

github repos task

asked in JavaScript category by user eiorgert

2 Answers

+3 votes

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>"));
    }
}

 

answered by user icabe
+1 vote

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>"));
        });
}
answered by user matthew44
...