Use variable obtained via input and declare in URL

Asked

Viewed 198 times

0

Create a screen with one that should be named after a user on Github. After entering the user name and clicking the search button application must search for the Github API (as URL below) data from user repositories and show them on screen: example URL: https://api.github.com/users/diego3g/repos Just change "diego3g" by user name.

I made my code this way:

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>

I believe it is working because when the user is invalid it appears Alert with the error, but it does not do the function when a valid user is placed. I think it’s a variable insertion problem (because I don’t know if I’m putting the variable in the URL the right way), I searched the internet, but I only find content for PHP.

How to register the variable that the user put and play it in the URL (in Javascript)?

javascript html input url promises

  • You have declared a function renderRepos within the then. Code is not running because it is inside a function and this function has not been invoked.

  • But the renderRepos is after it has the right URL, so it’s a structure that makes sense. var user = inputElement.value Axios.get('https://api.github.com/users/${user}/Repos') ?

1 answer

0


One way to solve using the code you developed is to:

Within the function getGit() do the necessary routines, as you already use the attribute id, I’ll make an example using the id of the 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')
    })
};

  • It worked out! Thank you so much!!

Browser other questions tagged javascript html input url promises

You are not signed in. Login or sign up in order to post.