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?