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
For further informations and documentation, please do refer https://docs.github.com/en/rest/reference/search
Hope you guys like it. :)
Top comments (5)
Cool stuff. Will definitely try it out.
Quick question Sooraj, do you have any resources for Oauth in Github??
Hey Sabarish, Glad you found it useful :)
I do not currently have an article for Oauth, but you can check out the documentation here -> docs.github.com/en/developers/apps...
As your question, I shall definitely add resources for other actions for github. :)
Thanks Sooraj. Looking forward to it!
nice article bro i have also written an article comparing between REST Apis and Soap
if you are interested give it a chance
Is there any API to get all the public repositories which exists in Github?