Question 188042 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to fetch number of repositories in github

I am making a personal portfolio website. I want to get number of my public repositories. This is my first time using Github API which is why I tried many different things but none of them gives me perfect solution.

I have a file called access_token.txt. That stores my github access token. I can get it from .txt file and use it on my computer. It works correctly. But when it comes to commit my code in Github and try to show through Github pages, my Projects number is nothing

const username = "sevro49";
let token = "";
const filePath = '../../access_token.txt';

// Check if running on GitHub Pages or locally
if (window.location.hostname === "sevro49.github.io") {
  // Running on GitHub Pages, use environment variable
  token = process.env.ACCESS_TOKEN;
} else {
  // Running locally, use fallback token value
  const projectsElement = document.querySelector(".profile div:nth-child(2) .number-of-repos");

  fetch(filePath)
    .then(response => response.text())
    .then(data => {
        token = data;

        fetch(`https://api.github.com/users/${username}`, {
            headers: {
                Authorization: `Bearer ${token}`,
            },
        })
            .then(response => response.json())
            .then(data => {
                const numRepos = data.public_repos;
                // Display the number of repositories on your website
                projectsElement.innerText = `${numRepos}`;
            })
            .catch(error => console.error(error));
    })
    .catch(error => {
        console.error('File could not be read', error);
    });
}

I am adding my portfolio’s link if you want to check out the error: https://sevro49.github.io/My-Portfolio/public/index.html

Tags:

2

Answers


  1. 0

    If you want to show public repositories number you don’t any authentication, check this snippet

    const username = "sevro49";
fetch(`https://api.github.com/users/${username}`, {})
   .then(response => response.json())
   .then(data => {
       const numRepos = data.public_repos;
          console.log(numRepos);
    })
    .catch(error => console.error(error));
    Login or Signup to reply.
  2. 0

    As @atrichkov mentioned, To get basic information about GitHub users (public repositories, date created, profile picture, etc..) you don’t need requests that includes token and authentication.

    Here is an example of how to use GitHub API:

    let form = document.querySelector('form');
let input = document.querySelector('input[type="text"]');
let p = document.querySelector('p');

const getUserRepos = async (username) => {
    let apiURL = `https://api.github.com/users/${username}`;
    // Send the request
    const response = await fetch(apiURL);
    // Get the response
    const data = await response.json();
    console.log(data);
    
    // Check if user is found
    if (data.message && data.message.toLowerCase() === 'not found'.toLowerCase()) {
        p.innerHTML = `User not found!`;
    } else {
        p.innerHTML = `"${username}" has ${data.public_repos} public ${data.public_repos === 1 ? 'repository' : 'repositories'}`;
    }

};


form.addEventListener('submit', (e) => {
    e.preventDefault();
    getUserRepos(input.value);
});
    <form method="POST">
  <input type="text" placeholder="Username" />
  <input type="submit" value="Search" />
</form>

<p></p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search