10

API Noob here, I'm having a really hard time figuring out API's and google tutorials are leaving me think they are way more advanced then I figure they should be. Here is what I'm trying to do:

Create a simple webpage that allows me to search the information located at this pokemon API: https://pokeapi.co/

Can anyone help me figure out how to write a function to make it work?

<!DOCTYPE html>
<html>
<body>

<h1>PokeMon Search API</h1>

<script>//javascript function here?</script>
 
  <input id="text" type="text" value="" style="Width:20%"/> 
  <button>Find PokeMon By Name</button>

<p>Results</p>   
  <div v-html="link.FUNCTIONVARIABLE"></div>

</body>
</html>

Thanks for any help!

Bunny
  • 323
  • 1
  • 2
  • 11
  • Hi. Welcome to SO. This question is too broad. We like to see code that you've attempted that you might be having problems with, not questions that ask us to write everything. However, looking at the [documentation](https://pokeapi.co/docs/v2.html) (which you should do before you continue) you can use [this library to help you](https://github.com/PokeAPI/pokeapi-js-wrapper). That should make things easier. – Andy Feb 08 '19 at 21:00
  • 2
    Possible duplicate of [How to call a REST web service API from JavaScript?](https://stackoverflow.com/questions/36975619/how-to-call-a-rest-web-service-api-from-javascript) – Heretic Monkey Feb 08 '19 at 21:04

1 Answers1

29

you'll need some Javascript here. Something like this should work:

<script type="text/javascript">
    var apiUrl = 'https://pokeapi.co/api/v2/pokemon/ditto/';
    fetch(apiUrl).then(response => {
      return response.json();
    }).then(data => {
      // Work with JSON data here
      console.log(data);
    }).catch(err => {
      // Do something for an error here
    });
</script>

this code is using the fetch function ( more info here ) to make a GET request to the url contained in the apiUrl variable . You may want to use an HTML input tag to make the Pokemon name dynamic.

David Guida
  • 950
  • 9
  • 19
  • 4
    You should add some explanation or links to documentation rather than dump code as your answer. The OP probably doesn't understand what `fetch` is, or what promises are and how they work. – Andy Feb 08 '19 at 21:03