my ui js class:
constructor(){
this.profile=document.getElementById("profile");
}
showRepoInfo(repos){
this.profile.innerHTML= "";
repos.forEach(repo => {
this.profile.innerHTML += `
<div id="languages" class="lang">
<span class="badge" id="repoStar">${repo.language}</span>
<span class="badgee" id="repoSize">${repo.size} KB</span>
</div>
`;
});
}
how can I print the languages the user is using in their repo and the percentiles of the languages? (i printed the username, name, surname, and repo names I got from the user)
my github js class :
class Github{
constructor(){
this.url = "https://api.github.com/users/";
}
async getGithubData(username){
const responseUser = await fetch(this.url+username);
const responseRepo = await fetch(this.url+username + "/repos");
const userData = await responseUser.json();
const repoData = await responseRepo.json();
return{
user:userData,
repo:repoData
}
}
I added a new function in your github class and now you can get the language percentage using ${repo.languagesPercentage} in html.
Note -> 1. This will be an array so you need to add a forEach or convert it into string using toString().
2. It will increase the number of APIs call in case of large repos and it can be optimised by giving a button in html named fetch language %.
class Github {
constructor() {
this.url = "https://api.github.com/users/";
this.repoUrl = "https://api.github.com/repos/";
}
async getGithubData(username) {
const responseUser = await fetch(this.url + username);
const responseRepo = await fetch(this.url + username + "/repos");
const userData = await responseUser.json();
const repoData = await responseRepo.json();
// set language percentage of each repo
for (let i in repoData) {
// get language percentage of repo
repoData[i].languagesPercentage = await this.getRepoLanguagePercentage(
username,
repoData[i].name
);
}
return {
user: userData,
repo: repoData,
};
}
async getRepoLanguagePercentage(username, reponame) {
const ls = await fetch(
this.repoUrl + username + "/" + reponame + "/languages"
);
const languageStats = await ls.json();
const totalPtsArr = Object.values(languageStats);
var sumTotalPts = 0;
totalPtsArr.forEach((pts) => {
sumTotalPts += pts;
});
const languagesPercentage = {};
Object.keys(languageStats).forEach((lang) => {
languagesPercentage[lang] = (languageStats[lang] * 100) / sumTotalPts;
});
return languagesPercentage;
}
}