Simple way to use the github REST api

#javascript #beginners #webdev #github

Hey there all you guys. In this article I will show you how to use the github api to fetch your favorite repository information. No dependencies required!!. We will be using only javascript to fetch and display the data in a HTML file.

Note: This is a simple snippet for fetching a public repository data.

Let us first setup a simple JSON fetch inside out script tag like this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="my-project"></div>
  <script>
    const searchQueryURL = 'https://api.github.com';

    window.addEventListener('DOMContentLoaded', function(e) {
      return fetch(searchQueryURL)
      .then(result => result.json())
      .then(response => console.log(response))
      .catch(err => console.log(err))
    });
  </script>
</body>
</html>

You can see that I am using the Promise approach. You can also you async await methods, but I prefer going with promises because it's easier for me.

If we run this html file on the browser, our code will make a call to https://api.github.com and you will receive a response object. This object will contain all the possible URLs that you can access from github. This is especially useful if you do not know what are the api routes available. These routes will also have query syntax to help you with understanding how to send the query params.You will receive something like this on your browser console.

{
  "current_user_url": "https://api.github.com/user",
  "current_user_authorizations_html_url": "https://github.com/settings/connections/applications{/client_id}",
  "authorizations_url": "https://api.github.com/authorizations",
  "code_search_url": "https://api.github.com/search/code?q={query}{&page,per_page,sort,order}",
  "commit_search_url": "https://api.github.com/search/commits?q={query}{&page,per_page,sort,order}",
  "emails_url": "https://api.github.com/user/emails",
  "emojis_url": "https://api.github.com/emojis",
  "events_url": "https://api.github.com/events",
  "feeds_url": "https://api.github.com/feeds",
  "followers_url": "https://api.github.com/user/followers",
  "following_url": "https://api.github.com/user/following{/target}",
  "gists_url": "https://api.github.com/gists{/gist_id}",
  "hub_url": "https://api.github.com/hub",
  "issue_search_url": "https://api.github.com/search/issues?q={query}{&page,per_page,sort,order}",
  "issues_url": "https://api.github.com/issues",
  "keys_url": "https://api.github.com/user/keys",
  "label_search_url": "https://api.github.com/search/labels?q={query}&repository_id={repository_id}{&page,per_page}",
  "notifications_url": "https://api.github.com/notifications",
  "organization_url": "https://api.github.com/orgs/{org}",
  "organization_repositories_url": "https://api.github.com/orgs/{org}/repos{?type,page,per_page,sort}",
  "organization_teams_url": "https://api.github.com/orgs/{org}/teams",
  "public_gists_url": "https://api.github.com/gists/public",
  "rate_limit_url": "https://api.github.com/rate_limit",
  "repository_url": "https://api.github.com/repos/{owner}/{repo}",
  "repository_search_url": "https://api.github.com/search/repositories?q={query}{&page,per_page,sort,order}",
  "current_user_repositories_url": "https://api.github.com/user/repos{?type,page,per_page,sort}",
  "starred_url": "https://api.github.com/user/starred{/owner}{/repo}",
  "starred_gists_url": "https://api.github.com/gists/starred",
  "user_url": "https://api.github.com/users/{user}",
  "user_organizations_url": "https://api.github.com/user/orgs",
  "user_repositories_url": "https://api.github.com/users/{user}/repos{?type,page,per_page,sort}",
  "user_search_url": "https://api.github.com/search/users?q={query}{&page,per_page,sort,order}"
}

Now as an example I will use the repos api to query the data from one of my public repositories. For this we will change the url to

const searchQueryURL = 'https://api.github.com/repos/SoorajSNBlaze333/tooltip-sequence';

using the syntax of https://api.github.com/repos/{owner}/{repo}

You will now recieve a JSON object containing all the information about that repository. Something like this

{
  // ... other info
  "name": "tooltip-sequence",
  "full_name": "SoorajSNBlaze333/tooltip-sequence",
  "private": false,
  "html_url": "https://github.com/SoorajSNBlaze333/tooltip-sequence",
  "description": "A simple step by step tooltip helper for any site",
  "fork": false,
  "url": "https://api.github.com/repos/SoorajSNBlaze333/tooltip-sequence",
  "stargazers_count": 146,
  "watchers_count": 146,
  "language": "JavaScript",
  "has_issues": true,
  "has_projects": true,
  "has_downloads": true,
  "has_wiki": true,
  "has_pages": false,
  "forks_count": 5,
  "mirror_url": null,
  "archived": false,
  "disabled": false,
  "open_issues_count": 0,
  "forks": 5,
  "open_issues": 0,
  "watchers": 146,
  "default_branch": "master",
  "temp_clone_token": null,
  "network_count": 5,
  "subscribers_count": 3
  // ... other info
}

I have removed some of the large urls before pasting to avoid taking too much space. From this data you can create your own representations of your projects on your blogs or your personal sites. Something like this