One of my favorite things when learning how to code was interacting with API’s in JavaScript. This blog will give you a quick run-down of API’s and show how to create a quick website that can pull info from an API to see right on your webpage.
API stands for Application Programming Interface. It allows different apps to exchange data and functionality. The API’s we will discuss in this blog are largely databases that store data and allow others to pull that data from their servers to use on their own webpages/webapps. There are many different API’s of this sort that I have used for various projects in the past such as the Spoonacular API to get recipes for a recipe app, or the Deezer API to search and pull songs for a playlist app. For this blog we will use the SpaceX API to get rocket info to display on our page, lets get started!
First open your code editor and create an index.html file and an app.js file. I created a container in the HTML file to throw the API data into, here’s what it looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced api's</title>
</head>
<body>
<div class = container></div>
<script src="./app.js"></script>
</body>
</html>Next in the app.js file I use a fetch request to get the data with a chained .then statement to manipulate it to display on our webpage (to learn more about how fetch requests work in JavaScript, refer to my earlier blog that explains it in more detail: https://mikeshahin.medium.com/javascript-fetch-explained-c130322b1bdc ). Here is what my app.js file looks like:
const spaceXObject = {};fetch('https://api.spacexdata.com/v3/landpads')
.then(response => {
console.log(response);
if (response.status === 200) {
return response.json();
}
})
.then(data => {
// console.log(data);
// console.log(data[0].details);
// console.log(data[0].wikipedia);
spaceXObject['details'] = data[0].details;
spaceXObject['wikipedia'] = data[0].wikipedia;
return spaceXObject
})
.then(objX => {
const container = document.querySelector('.container');const spaceXTitle = document.createElement('h1');
spaceXTitle.textContent = 'Space X'container.appendChild(spaceXTitle);const details = document.createElement('p');
details.textContent = spaceXObject.details;const wiki = document.createElement('a');
wiki.textContent = 'Space X Landpads'
wiki.setAttribute('href', spaceXObject.wikipedia)container.appendChild(details);
container.appendChild(wiki);
})
That’s it, if you open the index.js file in your preferred browser you should see the data displayed as follows:
Space X
SpaceX’s first east coast landing pad is Landing Zone 1, where the historic first Falcon 9 landing occurred in December 2015. LC-13 was originally used as a launch pad for early Atlas missiles and rockets from Lockheed Martin. LC-1 was later expanded to include Landing Zone 2 for side booster RTLS Falcon Heavy missions, and it was first used in February 2018 for that purpose.
