CODEWITHSUNDEEP
javascriptapi
Starfire
Starfire

Reputation: 23

Data not displaying in JavaScript API

I am making a Pokedex API as a side project and I can not display the data needed to display in the different text boxes. I am using a GET request to request the height, weight, type, and ability. 

<script>

$("button").click( function(){

    var pokemonName = $('pokemon').val(pokemon);
    event.preventDefault();
    getPokemonData(pokemonName);
})

function getPokemonData(pokemonName){
var request = new XMLHttpRequest()

//GET request with link

 request.open('GET','https://pokeapi.co/api/v2/pokemon/' + pokemonName, true);
// request for data
 request.onload =function(){
     var data = JSON.parse(this.response)
     if(request.status >= 200 && request.status <= 400)
     {
       // outputs data
       $(pokemonheight).val(response.height)
       $(pokemonweight).val(response.weight)
       $(pokemonAblity).val(response.ability)
       $(pokemonType).val(response.type)
     }
     else
     {
       alert ("Error");
     }
     request.send();
                          }
                                  }
</script>
</html>

I have tried setting a variable that would be equal to the response JSON element and then input that into the value of the textbox.

I do not have anything returned as expected or input displayed in the console if declared.

Upvotes: 0

Views: 265

Answers (1)

Derek Pollard
Derek Pollard

Reputation: 7165

Issue(s)

There were a few issues with your code:

  1. var pokemonName = $('pokemon').val(pokemon); you are setting the value of some element named pokemon (not valid) here
  2. var data = JSON.parse(this.response); where is this.response being set? Shouldn't we be receiving response in the callback?
  3. request.send(); is inside of the onload event, so the request never gets sent

Critiques

My main critique here is that you included a fairly large library (jQuery), and didn't utilize it to make the request. $.ajax is well documented and cleans up a lot of the intricacies of XMLHttpRequest.

The solution

$("button").click(function() {

  var pokemonName = $('#pokemon').val();
  //event.preventDefault();
  getPokemonData(pokemonName);
})

function getPokemonData(pokemonName) {
  var request = new XMLHttpRequest()

  //GET request with link

  request.open('GET', 'https://pokeapi.co/api/v2/pokemon/' + pokemonName, true);
  // request for data
  request.onload = function(response) {
    var data = JSON.parse(response.currentTarget.response)
    if (request.status >= 200 && request.status <= 400) {
      // outputs data
      console.log(data)
    } else {
      alert("Error");
    }
  }
  request.send();
}
<input id="pokemon" value="12" />
<button>search</button>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Taking all the above issues into account, I was able to get a working example of what it should ultimately look like.

Hope this helps!

Upvotes: 2

Related Questions