Skip to main content
tags editadas
Link
Luiz Felipe
  • 36,5mil
  • 10
  • 74
  • 154
Fonte Link

Usar o axios para gerar lista não ordenada consultando a API do GitHub

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?