Data not displaying in JavaScript API

Question

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.

Derek Pollard · Accepted Answer · 2019-03-28 20:03:44Z

2

Issue(s)

There were a few issues with your code:

var pokemonName = $('pokemon').val(pokemon); you are setting the value of some element named pokemon (not valid) here
~~var data = JSON.parse(this.response); where is this.response being set? Shouldn't we be receiving response in the callback?~~
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!

edited Mar 28, 2019 at 20:03

answered Mar 28, 2019 at 19:46

Derek Pollard

7,1956 gold badges45 silver badges62 bronze badges

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

4 Comments

Dave Salomon Over a year ago

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.

Benjamin Over a year ago

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

Derek Pollard Over a year ago

@DaveSalomon ahh good catch, sometimes I feel like XMLHttpRequest, in particular, is sparsely documented just to mess with developers

Starfire Over a year ago

This definitely helps @DerekPollard I never notice that the response.send() was encapsulated incorrectly. I tried utilizing $.ajax ran into similar issues.

Collectives™ on Stack Overflow

Data not displaying in JavaScript API

1 Answer 1

Issue(s)

Critiques

The solution

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue(s)

Critiques

The solution

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related