title: How to output repositories from github api
body: <p>I’m just learning, don’t throw tomatoes please) The situation is as follows, I do a search on the Github repositories using its API,when a user prints something, then he displays possible results (as indicated on the screenshot), now the problem is, how do I iterate over the list that appeared during input, and so that when pressed the showOnPage function works for each item?</p>
  <pre><code>    constructor() {
          this.client_id = 'Iv1.46288115e5c16a2f';
          this.client_secret = '25e67ed3b6da1ebf13b04de1a8a69bc227eb811f';
          this.repo_count = 2;
      }
  
      async getRepo(userText){
  
          const repoResponse = await fetch(`https://api.github.com/search/repositories?q=${userText}&amp;client_id=${this.client_id}&amp;client_secret=${this.client_secret}&amp;per_page=${this.repo_count}`);
          const repo = await repoResponse.json();
          return{
              repo: repo.items
          }
      }
  }
  
  class UI {
      constructor() {
          this.displayRepo = document.getElementById('displayRepo');
      }
  
      showRepo(repo){
          let output = '';
          repo.forEach(function (repo) {
              output += `
               &lt;div class=&quot;item&quot;&gt;${repo.name}&lt;/div&gt;
              `});
          document.getElementById('displayRepo').innerHTML = output;
      }
  
      showOnPage(repo){                 //&lt;----------
          let output = '';
  
          repo.forEach(function (repo) {          
              output += `
               &lt;div class=&quot;repo-list-item&quot;&gt;
                &lt;p class=&quot;p-list&quot;&gt;Name: ${repo.name}&lt;/p&gt;
                &lt;p class=&quot;p-list&quot;&gt;Owner: ${repo.owner.login}&lt;/p&gt;
                &lt;p class=&quot;p-list&quot;&gt;Stars: ${repo.stargazers_count}&lt;/p&gt;
                &lt;div class=&quot;close&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
              `});
          document.getElementById('displayRep').innerHTML = output;
      }
  
      clearProfile(){
          this.displayRepo.innerHTML = '';
      }
  }
  
  const gitRepo = new Github();
  const ui = new UI();
  const searchRepo = document.querySelector('.input-repo');//input
  const form = document.querySelector(&quot;.autocomplete-list&quot;);//an output list when entering something into input
  const item = document.querySelector(&quot;.item&quot;);//single item in list
  
  searchRepo.addEventListener('keyup', e =&gt;{
      const userText = e.target.value;
      if(userText !== ''){
          gitRepo.getRepo(userText).then(data =&gt; {
              ui.showRepo(data.repo);
          });
      }else{
          ui.clearProfile();
      }
  });```
  
  
    [1]: https://i.stack.imgur.com/aRFfW.png
  </code></pre>