0

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.

Improve this question
0

1 Answer 1

Reset to default
2

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!

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

All valid & correct. this.response, will work though. response is part of XMLHttpRequest, and given the scope how this code's written, this.response would work.
I agree with everything you've said. While you were writing this, I built my own functional example, which turned out pretty much the same as yours: stackblitz.com/edit/typescript-nvau1g
@DaveSalomon ahh good catch, sometimes I feel like XMLHttpRequest, in particular, is sparsely documented just to mess with developers
This definitely helps @DerekPollard I never notice that the response.send() was encapsulated incorrectly. I tried utilizing $.ajax ran into similar issues.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.