Using GitHub list-issues-for-a-repository API

问题

When you go to GitHub, under Issues, it pulls up all the open issues as an HTML page. We'd like to implement a dashboard showing all the issues in a repository, grouped by labels, including those issues which are not correctly labelled.

This is the corresponding list-issues-for-a-repository API.

While I was initially using jQuery and Javascript, am now using PHP for a proof-of-concept because its built-in session handling lets me use the same page to login, have GitHub authenticate & callback, and continue. But it doesn't matter to me, any language is okay.

I've managed to get access to the GitHub API via OAUTH2, but when I get the list of repositories via https://api.github.com/orgs/{org}/repos it comes up as an empty array.

Because the /orgs/{org}/repos API returns an empty array, of course the corresponding /repos/{org}/{repo}/issues API will return an error.

Edit: See this followup for a solution! Glad I finally got it working!

回答1:

It is a rest API. You need to call some endpoints using an Http request. I don't know what language you are trying to use so I can't give you a good example on how to acheive this. If you don't know which language to use yet, use postman to create REST API call to the github API.

Let's say you want to retreive the issues of the microsoft's typescript repo, You would need to call this API endpoint :

https://api.github.com/repos/microsoft/typescript/issues

Notice here that i have replace the :owner and :repo value of documentation for the one i'm trying to get.

You can then pass some parameters to the call to filter your data, for example, the API label.

https://api.github.com/repos/microsoft/typescript/issues?labels=API

This will only return issues that are labelled as API.

This is the basics of how to use an API.

回答2:

You can use jQuery Ajax to access the Github API and add a basic authentication header to authenticate (see here), an example is shown below, this will pull the issues for a given repo and show the first 10 in an alert window.

See the documentation on pulling issues here: https://developer.github.com/v3/issues/ to see which parameters you can use to filter, sort etc.

For example you can get all issues labelled 'bug' using:

/issues?labels=bug

This can include multiple labels, e.g.

/issues?labels=enhancement,nicetohave

You could easily modify to list in a table etc.

const username = 'github_username'; // Set your username here
const password = 'github_password'; // Set your password here
const repoPath = "organization/repo" // Set your Repo path e.g. microsoft/typescript here

$(document).ready(function() {
    $.ajax({
        url: `https://api.github.com/repos/${repoPath}/issues`,
        type: "GET",
        crossDomain: true,
        // Send basic authentication header.
        beforeSend: function (xhr) {
            xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
        },
        success: function (response) {
            console.log("Response:", response);
            alert(`${repoPath} issue list (first 10):\n - ` + response.slice(0,10).map(issue => issue.title).join("\n - "))
        },
        error: function (xhr, status) {
            alert("error: " + JSON.stringify(xhr));
        }
    });
});

Below is a snippet listing issues for a (public) repo using jQuery and the Github API:

(Note we don't add an authentication header here!)

const repoPath = "leachim6/hello-world" // 

$(document).ready(function() {
$.ajax({
    url: `https://api.github.com/repos/${repoPath}/issues`,
    type: "GET",
    crossDomain: true,
    success: function (response) {
        tbody = "";
        response.forEach(issue => {
            tbody += `<tr><td>${issue.number}</td><td>${issue.title}</td><td>${issue.created_at}</td><td>${issue.state}</td></tr>`;
        });
        $('#output-element').html(tbody);
    },
    error: function (xhr, status) {
        alert("error: " + JSON.stringify(xhr));
    }
});
});

<head>
<meta charset="utf-8">
<title>Issue Example</title>
<link rel="stylesheet" href="css/styles.css?v=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
</head>
<body style="margin:50px;padding:25px">
<h3>Issues in Repo</h3>
<table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">Issue #</th>
        <th scope="col">Title</th>
        <th scope="col">Created</th>
        <th scope="col">State</th>
      </tr>
    </thead>
    <tbody id="output-element">
    </tbody>
</table>
</body>

来源：https://stackoverflow.com/questions/58665002/using-github-list-issues-for-a-repository-api

标签

github

github-api

github-api-v3