Use Axios to generate an unordered list using the Github API

Question

I have a code that should receive the client’s Github username and generate a list with the name of its repositories. The list is generated, but always returns undefined. The result would be something like <li>repositório 1</li> and so on. The code is like this:

function add(){
    var list = document.getElementById('list')
    var user = document.getElementById('user')
    var url = `https://api.github.com/users/${user.value}/repos`
    axios.get(url)
    .then(
        function(response){
            var repos = response.data
            console.log(repos)
            for(var item in repos){
                item = document.createElement('li')
                var textItem = document.createTextNode(repos.name)
                item.appendChild(textItem)
                list.appendChild(item)
            }
        }
    )
    .catch(
        function(error){
            console.log(error)
        }
    )
}

    <input type="text" id="user" placeholder="Digite aqui seu nome       de usuário">
    <button onclick="add()">Adicionar repositórios</button>
    <br>
    <br>
    <ul id="list">
        
    </ul>
    <script src="https://unpkg.com/axios/dist/axios.min.js">             </script>
    <script src="main.js"></script>

I’m using Axios to make the request. Does anyone know where the problem is?

Answer 1

for (let repo in repos) {
  elementLi = document.createElement('li')
  var textItem = document.createTextNode(repos[repo].name)
  elementLi.appendChild(textItem)
  list.appendChild(elementLi)
}

In addition to the variable you were superimposing, your repo in the for returns an array and you have to pass the index: repos[repo].name.

Answer 2

According to the Github API, the repository name can be obtained from the property name. The problem you are experiencing is caused in the following section:

for (var item in repos) {
  var textItem = document.createTextNode(repos.name)
  //                                     ↑↑↑↑↑
}

Note that you are trying to access the property name of the repositories array, not the repository itself, that you could access using repos[item] - since you are using for..in. Another problem is that you are over-writing this variable itens with the following statement:

item = document.createElement('li')

So by fixing these problems, we have:

function add() {
  const list = document.getElementById('list');
  const user = document.getElementById('user');
  const url = `https://api.github.com/users/${user.value}/repos`;

  axios
    .get(url)
    .then(function(response) {
      const repos = response.data;

      for (const repo of repos) {
        const item = document.createElement('li');
        const textItem = document.createTextNode(repo.name);
        item.appendChild(textItem);
        list.appendChild(item);
      }
    })
    .catch(function(error) {
      console.log(error);
    });
}

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<input type="text" id="user" placeholder="Digite aqui seu nome de usuário" />
<button onclick="add()">Adicionar Repositórios</button>
<ul id="list"></ul>

I also made some other changes to the code, like using the statement const for the variables, since declaring the variables is a good practice and something that should always be done.

Besides, I used the noose for..of instead of for..in, since it returns the current iteration element (what we need), not its index. See the difference between the two:

const array = ['Foo', 'Bar', 'Baz'];

console.log('Laço for..of:');
for (const item of array) {
  console.log(item);
}

console.log('Laço for..in:');
for (const item in array) {
  console.log(item);
}

For a deeper understanding of the difference between these two ties, check out What is the difference between for... of and for.. in?.