HTML

AWS Serverless Web App

Now that we have a fully functional API, let’s write some HTML and JavaScript to show the information on a webpage. We will use the JavaScript “Fetch” method to call our API, get back the JSON file, parse out the information we want and then present that on our webpage inside a <div> element.

Tasks:

  • add a <div> section to hold the data
  • add a <script> section, calling our API
  • get back JSON file and place the info in a variable
  • present the data in our index.html file
index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <title>Web App</title>
  </head>
  <body>
    <div id="user_info">
      <p>Please wait ...</p>
    </div>
    <div>
      <button onclick="getUser()">Click me</button>
    </div>
  </body>

  <script type="text/javascript">

    async function getUser() {
      // get the user info from API

      const api_url = 'your_API_URL?user_email=jane.smith@gmail.com'
      const api_response = await fetch(api_url);
      const api_data = await(api_response).json();

      const div_user_info = document.getElementById('user_info');
      div_user_info.innerHTML = api_data['body'];
    }
  </script>
</html>