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

Question

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!

Skardol

Answer 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.

Hostetler

Thank you. That got me part way there. It's telling me { "message": "Not Found", "documentation_url": "https://developer.github.com/v3/issues/#list-issues-for-a-repository" }, but I read up and that's apparently the standard response when trying to access private repos, so researching on OAuth, etc. FWIW, using JavaScript under jQuery framework. – Skardol

There probably is, but at this point, i cannot teach you how oauth works. There is plenty of tutorial online. I must say, don't take this the wrong way, but this is quite a big project for someone with your knownledge of APIs. I just want to make sure you know what you are getting into @YiminRong – Hostetler

Thank you. I've gotten OAUTH2 to work, but it's not returning expected information. Please see edit in issue. – Skardol

Hi @Hostetler I got stuck in a scenario where i need to filter only the user-generated issues. This is the API link of a repository issue list api.github.com/repos/angular/angular/issues I want to filter only the user-generated issue but it also included the issue created by the "renovate[bot]". Please help me how can I do this? – Footlambert

@SalmanAhmad-MeanDeveloper The only filter, we seams to be able to use is filter with the parameter all. This will returns all the issues for a given repo. You can then filter out the one that have "renovate[bot]" as their property user.login, in whatever language you are using. – Hostetler

@Hostetler Thanks man I was thinking the same and I figure it out by filtering the list using user.type !== 'Bot'. Actually, I was looking at the solution from the API filter but unfortunately, no options are there. – Footlambert

@SalmanAhmad-MeanDeveloper A solution directly on the API side would be ideal, but it doesn't look like there is, no. Good luck with your project ! – Hostetler

Answer 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>

Elva

Thank you. I'll look at this ASAP. I'm not getting the expected results using OAUTH2, and I noticed one API https://api.github.com/authorizations indicated that it could be accessed only with basic authorization: stdClass Object ( [message] => This API can only be accessed with username and password Basic Auth [documentation_url] => https://developer.github.com/v3 ). So maybe this will work. – Skardol

The basic authentication works for me, using my github credentials. If you wish to access a public repo you can comment out the beforeSend section! – Elva

Hi @TerryLennox I got stuck in a scenario where I need to filter only the user-generated issues. This is the API link of a repository issue list api.github.com/repos/angular/angular/issues I want to filter only the user-generated issue but it also included the issue created by the "renovate[bot]". Please help me how can I do this? – Footlambert

Maybe an Array.filter will work for the user name once the issues are retrieved from the api? – Elva

@TerryLennox Thanks man I was thinking the same and I figure it out by filtering the list using user.type !== 'Bot'. Actually, I was looking at the solution from the API filter. – Footlambert