0

Crie uma tela com um que deve receber o nome de um usuário no Github. Após digitar o nome do usuário e clicar no botão buscar a aplicação deve buscar pela API do Github (conforme URL abaixo) os dados de repositórios do usuário e mostrá-los em tela: URL de exemplo: https://api.github.com/users/diego3g/repos Basta alterar "diego3g" pelo nome do usuário.

Fiz o meu código da seguinte forma:

var inputElement = document.querySelector('#app input');
var listElement = document.querySelector('#app ul');

function getGit(){
    var user = inputElement.value

    axios.get('https://api.github.com/users/${user}/repos')

    .then(function(response){

        function renderRepos(){
        var repos = response.data

            for(repo of repos){
                var repoElement = document.createElement('li');
                var textElement = document.createTextNode(repo);
        
                repoElement.appendChild(textElement);
                listElement.appendChild(repoElement);
            }
        };
    })
    .catch(function(error){
        alert('User inválido')
    })
};
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>API</title>
    </head>
    <body>
        


        <div id='app'>
            <input type="text" id="user" placeholder="Digite um user do Github">
            <button onclick="getGit()">Adicionar</button>
            <ul></ul>
        </div>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script type="text/javascript" src='./Desafio 03_Starter_Rocketseat.js'></script>
    </body>
</html>

Acredito que esteja funcionando porque quando o usuário é inválido ele aparece o alert com o erro, mas não faz a função quando se colocar um user válido. Acho que seja um problema de inserção de variável (porque não sei se estou colocando a variável na URL da forma certa), procurei na internet, mas só encontro conteúdo para PHP.

Como registro a váriavel que o user colocou e jogo ela na URL (em Javascript)?

2
  • Você declarou uma função renderRepos dentro do then. O código não está rodando porque ele está dentro de uma função e essa função não foi invocada.
    – Andre
    28/05/2020 às 20:56
  • Mas a renderRepos é depois que ele tem a URL certa, então é uma estrutura que faz sentido. var user = inputElement.value axios.get('api.github.com/users/${user}/repos') O trecho acima vem antes da renderRepos e não está sendo executado, essa é minha dúvida... o que mais preciso fazer para que ele rode?
    – Caroldf
    28/05/2020 às 21:03

1 Resposta 1

0

Uma maneira de resolver, utilizando o código que você desenvolveu é:

Dentro da função getGit() fazer as rotinas necessárias, como você já utiliza o atributo id, vou fazer um exemplo que utiliza o id do input element:

function getGit() {
  const inputElement = document.getElementById('user')
  console.log(inputElement)

  var user = inputElement.value
  console.log(user)

  axios.get(`https://api.github.com/users/${user}/repos`)

    .then(function (response) {
        console.log(response.data)
    })
    .catch(function (error) {
      alert('User inválido')
    })
};
1
  • Deu certo! Muito obrigada!!
    – Caroldf
    28/05/2020 às 21:35

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 .