HELLO AND WELCOME TO YOUR NASA API GUIDE_

GET STARTED: Before you begin setting up your JavaScript AJAX requests, you need to obtain a developer key for the NASA API. Even though the NASA API is mostly public domain it still requires an API key to monitor the amount of usage a developer is demanding. Registration for the NASA API is currently well documented and can be accomplished at the following link: HERE
After getting your key navigate thought the tabs on the TOP and choose what fits your project , I did provide {: CODE :} examples to make it easy for you ;) ,


ABOUT NASA API PROJECT: A Open Innovation team to continue NASA’s efforts to meet the White House mandate to set our data free – in a format that is useful for you. In doing so, we hope to spark your creative juices and equip you with tools to innovate your world – whether local, global, or interstellar – leveraging our digital assets. We may not be able to offer you the ride-of-your-life on a spaceship (at least for now), but we can certainly work together to solve looming challenges here on Earth – using NASA data, tools, and resources.


ABOUT MY PROJECT: I made this to make it easy on any one whose working on NASA API project especially for school for saving time, while navigating the documentation on NASA API website I didn't find it helpful by not providing examples on results of the API so i decided to do this! open source and examples on results of the API . Hope this will help you decide which API listing fits your project. :)


NOTE: I'm still working on this project and my goal is to document all what you can get from NASA'a API , if you have any suggestions , notes , or advices on this particular project reach out to me on Linkedin.


ASTRONOMY PICTURE OF THE DAY

About: Discover the cosmos! Each day a different image or photograph of our fascinating universe is featured, along with a brief explanation written by a professional astronomer.

{: CODE :}

First we set the request to the api

$.ajax({

let: url ="https://api.nasa.gov/planetary/apod?api_key="+ apiKey ,

url: url,

success: function success(result)

{

//Sometime they post video too//

if(result.media_type == "video") {

$("#apod_img_ofDay").css("display", "none");

$("#apod_vid_id").attr("src", result.url);

}

else {

$("#apod_vid_id").css("display", "none");

$("#apod_img_ofDay").attr("src", result.url);

}

$("#apod_explaination").text(result.explanation);

$("#apod_title").text(result.title);

}

});

This is what you need for HTML

#apod_img_ofDay This id for the picture that we are getting

#apod_vid_id This id for video , they're generous sometimes

#apod_explaination This id for the picture description

#apod_title This id for the picture title

...

The CSS is up to your creativity ... see you in the next section

Neo - Feed

About: Retrieve a list of Asteroids based on their closest approach date to Earth

{: CODE :}

First we set the request to the api

// getting today date for using it on the api url

let newDate = new Date();

let today = newDate.toJSON().slice(0,10).replace(/-/g,'-');

function addDays(dateObj, numDays) {

dateObj.setDate(dateObj.getDate() - numDays);

return dateObj;

}

let sevenDaysLess = addDays(new Date() , 7).toJSON().slice(0,10).replace(/-/g,'-');

//

//Neo Feed TAble

$.ajax({

let: url ="https://api.nasa.gov/neo/rest/v1/feed?start_date="+sevenDaysLess +"&end_date="+ today+"&api_key="+ apiKey ,

url: url,

success: function success(result) {

// console.log(result.near_earth_objects)

let tableHtml = `<-table >

<-thead><-/thead>

<-tr>

<-th>id<-/th>

<-th>name<-/th>

<-th>close approach date<-/th>

<-th>orbiting body<-/th>

<-th>miss distanclet: miles<-/th>

<-/tr>

<-/thead>

<-tbody>`

//for loop deep to the data

for (let earthOject in result.near_earth_objects) {

if (earthOject === today) {

// console.log(result.near_earth_objects[earthOject]);

for (let i = 0; i < result.near_earth_objects[earthOject].length; i++) {

let neoId = result.near_earth_objects[earthOject][i].neo_reference_id;

let neoName = result.near_earth_objects[earthOject][i].name;

let close_approach_date = result.near_earth_objects[earthOject][i].close_approach_data[0].close_approach_date;

let orbiting_body = result.near_earth_objects[earthOject][i].close_approach_data[0].orbiting_body;

let miss_distanclet = result.near_earth_objects[earthOject][i].close_approach_data[0].miss_distance.miles;

//adding data to the table row's

tableHtml += `<-tr><-/tr>

<-td>${neoId}<-/td>

<-td>${neoName}<-/td>

<-td>${close_approach_date}<-/td>

<-td>${orbiting_body}<-/td>

<-td>${miss_distanclet}<-/td>

<-/tr>`

}

}

}//end of for loop

tableHtml += `<-/tbody>`

$('.neoFeed').append(tableHtml);

}

});

This is what you need for HTML

Note: don't forget to take off the dashes (-) in javascript HTML build

All you need now is div with an id of #neoFeed

...

The CSS is up to your creativity ... see you in the next section

MARS ROVER

Chouse a Date:

look

NOTE: Most rovers did not start taking photos until several days after landing. Curiosity landed on: 2012-08-06 Opportunity landed on: 2004-01-25 Spirit landed on: 2004-01-04

Image Retrieval Status:

About: collection of images gathered by NASA's Curiosity, Opportunity, and Spirit rovers on Mars and make it more easily available to other developers, educators, and citizen scientists. This API is maintained by Chris Cerami.

{: CODE :}

First we set the request to the api

// Mars Rover API with a different approach by a direct browser request

let exampleURL = "https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=2015-10-31" ;

let request = new XMLHttpRequest();

request.open('GET', exampleURL + '&api_key=' + apiKey, true);

request.addEventListener('load',function(){

if(request.status >= 200 && request.status < 400){

let response = JSON.parse(request.responseText);

}

else {

console.log("Error in network request: " + request.statusText);

}});

request.send(null);

//Rover API Implementation

document.addEventListener('DOMContentLoaded', submitButtonsReady);

function submitButtonsReady() {

document.getElementById('dateInput').addEventListener('click', function (event) {

// console.log('1');

let request = new XMLHttpRequest();

let date = document.getElementById('dateValue').value;

let roverName = "";

let buttonStatus1 = document.getElementById('button1').checked;

let buttonStatus2 = document.getElementById('button2').checked;

let buttonStatus3 = document.getElementById('button3').checked;

if (buttonStatus1 === true) {

roverName = "curiosity";

}

else if (buttonStatus2 === true) {

roverName = "opportunity";

}

else {

roverName = "spirit";

}

request.open('GET', 'https://api.nasa.gov/mars-photos/api/v1/rovers/' + roverName + '/photos?earth_date=' + date + '&api_key=' + apiKey, true);

request.addEventListener('load', function () {

if (request.status >= 200 && request.status < 400) {

let response = JSON.parse(request.responseText);

// Appending Rover Data

document.getElementById('imageStatus').textContent = 'Found';

document.getElementById('imageID').src = response.photos[0].img_src;

document.getElementById('roverCaption').textContent = response.photos[0].rover.name;

document.getElementById('landingCaption').textContent = response.photos[0].rover.landing_date;

document.getElementById('endingCaption').textContent = response.photos[0].rover.max_date;

}

else {

console.log("Error in network request: " + request.statusText);

}

});

document.getElementById('imageStatus').textContent = 'Please try a different date or check your syntax!';

request.send(null);

event.preventDefault();

})

This is what you need for HTML

#imageStatus This id for the picture

#roverCaption This id for a description

#landingCaption This id for the landing date

#endingCaption This id for the ending date

...

The CSS is up to your creativity ... see you in the next section

EPIC API

Chouse a Date:
look

TIP: The first acquired images start on 2015-09-01

Image Result

Image Retrieval Status:

Image Caption:

About: The EPIC API provides information on the daily imagery collected by DSCOVR's Earth Polychromatic Imaging Camera (EPIC) instrument. Uniquely positioned at the Earth-Sun Lagrange point, EPIC provides full disc imagery of the Earth and captures unique perspectives of certain astronomical events such as lunar transits using a 2048x2048 pixel CCD (Charge Coupled Device) detector coupled to a 30-cm aperture Cassegrain telescope.

{:{: CODE :}:}

document.addEventListener('DOMContentLoaded', submitEpicButtonsReady);

function submitEpicButtonsReady(){

// document.getElementById('epicDateInput').addEventListener('click', function(event){

document.getElementById('epicDateInput').addEventListener('click', function(event){

let request = new XMLHttpRequest();

let date = document.getElementById('epicDateValue').value;

let dateArray = date.split("-");

let year = dateArray[0];

let month = dateArray[1];

let day = dateArray[2];

request.open('GET', 'https://api.nasa.gov/EPIC/api/natural/date/' + date + '?api_key=' + apiKey, true);

request.addEventListener('load',function(){

if(request.status >= 200 && request.status < 400){

let response = JSON.parse(request.responseText);

if(typeof(response[0].image) === 'string')

{

document.getElementById('epicImageStatus').textContent = 'Found';

document.getElementById('epicImageID').src = 'https://epic.gsfc.nasa.gov/archive/natural/' + year + '/' + month + '/' + day + '/jpg/' + response[0].image + '.jpg';

document.getElementById('epicImageCaption').textContent = response[0].caption;

}

}

else

{

}});

document.getElementById('epicImageStatus').textContent = 'Please try a different date or check your syntax!';

request.send(null);

event.preventDefault();

})

}

This is what you need for HTML

apod_title This id for the picture title

#epicImageID This id for the picture

#epicImageStatus This id for status

#epicImageCaption This id for the picture description

...

The CSS is up to your creativity ... see you in the next section