1

Tenho um código que deveria receber o nome de usuário do GitHub do cliente e gerar uma lista com o nome de seus repositórios. A lista é gerada, mas sempre retorna undefined. O resultado seria algo como <li>repositório 1</li> e assim por diante. O código está assim:

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>

Estou usando o axios para fazer a requisição. Alguém sabe onde está o problema?

2 Respostas 2

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

Além da variável que você estava sobrepondo, o seu repo no for retorna um array e você tem que passar o índice: repos[repo].name.

1
  • vlw pela edição, primeira resposta no stack! Commented 26/11/2019 às 0:55
1

De acordo com a API do GitHub, o nome do repositório pode ser obtido na propriedade name. O problema que você está sofrendo é causado no seguinte trecho:

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

Note que você está tentando acessar a propriedade name do array de repositórios, e não do repositório em si, que você poderia acessar usando repos[item] — já que está utilizando for..in. Um outro problema é que você está sobre-escrevendo essa variável itens com a seguinte declaração:

item = document.createElement('li')

Então, corrigindo esses problemas, temos:

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>

Também fiz algumas outras mudanças no código, como utilizar a declaração const para as variáveis, uma vez que declarar as variáveis é uma boa prática e algo que deve sempre ser feito.

Ademais, utilizei o laço for..of ao invés de for..in, já que ele retorna o elemento da iteração atual (o que precisamos), e não o seu índice. Veja a diferença entre ambos:

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

Para um maior aprofundamento entre a diferença entre esses dois laços, confira Qual é a diferença entre o for…of e o for..in?.

2
  • Acho que entendi. O uso de for...of em vez de for...in também interfere em algo ou são a mesma coisa? Commented 25/11/2019 às 23:44
  • Nesse caso, há uma diferença... Acabei me esquecendo de documentar na resposta. Vou editar a resposta... Commented 25/11/2019 às 23:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .