HTML¶
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
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>
|