How to call REST API in HTML

javascript html database rest api

44,151

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.

44,151

Author by

Bunny

Just hopping through a binary forest, bopping problems on their head.

Updated on February 09, 2020

Comments

Bunny about 4 years
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!
Andy about 5 years

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.