How can I pull the languages ​used by GitHub api users and their percentages into my html page?

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
    }

}

Answer

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;
  }
}