NASA space agency made public several data including images and videos for curious people to explore the universe. This data can be explored by using their open APIs that anyone can use to develop relevant applications. The following approach covers how to fetch data provides by NASA using the open APIs.
How to generate APIs key to explore the NASA data?
To explore the NASA data, we need to generate the APIs key.
Step 1: Go to NASA’s open APIs website to generate APIs key https://api.nasa.gov/ and fill in the details to get the web services.
Step 2: After fill all the required fields the APIs key will be generated as shown below.
Just copy and note your API key, we will use this key in our JavaScript to fetch the data from the NASA portal.
Step 3: After generating the API key go to the browse APIs section and browse API services provides by the NASA agency.
To show the functionality of APIs and how can we use this in our website, we will use an APOD API which is used to explore the astronomy picture of the day. The APOD is one of the APIs which is used to fetch pictures from the NASA portal. The APOD stands for Astronomy Picture of the Day.
These are the following query parameters to fetch data:
- data: The date of the APOD image to retrieve. It is of YYYY-MM-DD type and the default value is today.
- start_date: The start of a date range, when requesting data for a range of dates. Can’t be used with a date. It is of YYYY-MM-DD type and the default value is none.
- end_date: The end of the date range, when used with start_date. It is of YYYY-MM-DD type and the default value is today.
- count: If this is specified then count randomly chosen images will be returned. Can’t be used with a date or start_date and end_date. It is of int type and the default value is none.
- thumbs: Return the URL of the data video thumbnail. If an APOD is not a video, this parameter is ignored. It is of the bool type and the default value is false.
- api_key: It is the api.nasa.gov key for expanded usage. It is of string type and the default value is DEMO_KEY.
A sample query is shown below:
https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY
Step 4: Create an index.html file to Display the Astronomy Picture of the Day (APOD) on the webpage using HTML and JavaScript code as shown below.
HTML
<!DOCTYPE html><html><body> <h2>Astronomy Picture of the day</h2> <input type="date" id="date" onchange="getDate();"> <h3 class="img-title" id="title"></h3> <em class="date" id="pic_date"></em> <img src="" alt="" id="apod_pic" class="img-apod"> <p class="caption" id="caption"></p> <script type="text/javascript"> // Declaration of variables var method = "GET"; const key = "U0PqJ5UprbVQExkXc7ZgsGVfIM7Z1O8Uiv7g2hOO"; var url = + key + "&date="; var mode = true; var date; // Function definition to get date from // input box and supply in sendHttpRequest // function function getDate() { date = document.getElementById("date").value; console.log(date); sendHttpRequest(method, url + date, mode).then((data) => { console.log(data); update(data); }); } // Declaration of update function to // display the fetched data on webpage function update(data) { document.getElementById("pic_date") .innerHTML = data.date; document.getElementById("title") .innerHTML = data.title; document.getElementById("apod_pic") .src = data.url; document.getElementById("caption") .innerHTML = data.explanation; return data; } // Send request to nasa portal to data // using the XMLHttpRequest function sendHttpRequest(method, url, mode) { return new Promise((resolve, reject) => { var req = new XMLHttpRequest(); req.onreadystatechange = function () { if (this.readyState == 4) { if (this.status == 200) { var data = JSON .parse(this.response); console.log(data); resolve(data); } } } req.open(method, url, mode); req.send(); }); } </script></body></html> |
Output: Open the webpage, and select the previous date. After the selection of the date, the astronomy picture of the day will be displayed on a webpage with the date, title, and description of the pic as shown below.
Conclusion: This is how we can fetch the data from the NASA portal using the NASA open APIs. We can also use other services like EPIC (Earth Polychromatic Imaging Camera), Mars rover, and Image and Video Library.
