Accessing NASA api using Javascript

Question

So I'm new to using Javascript and I'm wondering how to access NASA API such as https://api.nasa.gov/planetary/earth/assets?lon=100.75&lat=1.5&begin=2014-02-01&api_key=DEMO_KEY and using the data? I want to get the "dates" and put them into an array, but I don't know how to do that. How can I do this using Javascript?

maybe the code in [this question and answer](https://stackoverflow.com/questions/38881388/javascript-http-request-failed) will help — Jaromanda X, Oct 19 '16 at 23:40

score 1 · Answer 1 · answered Oct 19 '16 at 23:44

if you are using jQuery, you can do an ajax call using the jQuery.ajax( url ) method and passing in 'https://api.nasa.gov/planetary/earth/assets?lon=100.75&lat=1.5&begin=2014-02-01&api_key=DEMO_KEY' as the url.

EDIT: this is more detailed code/explaination fodoing an ajax request in jquery:

$.ajax({

    // The URL for the request
    url: "https://api.nasa.gov/planetary/earth/assets?lon=100.75&lat=1.5&begin=2014-02-01&api_key=DEMO_KEY",


    // Whether this is a POST or GET request
    type: "GET",

    // The type of data we expect back
    dataType : "json",
})
  // Code to run if the request succeeds (is done);
  // The response is passed to the function
  .done(function( json ) {
     console.log(json)
  })
  // Code to run if the request fails; the raw request and
  // status codes are passed to the function
  .fail(function( xhr, status, errorThrown ) {
    alert( "Sorry, there was a problem!" );
    console.log( "Error: " + errorThrown );
    console.log( "Status: " + status );
    console.dir( xhr );
  })
  // Code to run regardless of success or failure;
  .always(function( xhr, status ) {
    alert( "The request is complete!" );
  });

score 1 · Answer 2 · answered Oct 19 '16 at 23:48

1

Read this guide from MDN about Ajax. Then you can use JSON.parse to parse the returned data, and then map() to get the dates from each item in the results array. See the example below. If you want to use a library like jQuery then the AJAX code will be simplified.

var url = 'https://api.nasa.gov/planetary/earth/assets?lon=100.75&lat=1.5&begin=2014-02-01&api_key=DEMO_KEY';
var httpRequest; //declare here for good scope
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
  httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
  httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.onreadystatechange = function() {
  if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status == 200) {
    returnedData = httpRequest.responseText;
    var data = JSON.parse(returnedData);
    if (data.hasOwnProperty('results')) {
      var dates = data.results.map(function(result) {
        return result.date;
        });
      console.log('dates: ',dates);
     }
  } else {
    // still not ready or error occurred
  }
};
httpRequest.open('GET', url, true);
httpRequest.send(null);

answered Oct 19 '16 at 23:48

Sᴀᴍ Onᴇᴌᴀ

8,218
8
36
58

1

To understand well what this code is doing you will want to understand [callbacks in JavaScript](http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/), and if you want to write clean async code using modern patterns you should try to understand and use [JavaScript promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). Callbacks/promises are necessary because you don't know exactly how long an http request will take to return it's data. They're a way to say "Do this as soon as you get a response.". – Skylar Oct 20 '16 at 00:06
1

Thanks for the resources @Skylar - though it should be noted that some browsers (mostly IE) don't support Promises natively (refer to the [Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#Browser_compatibility) section) so if one had to support customers using any of those older browsers they should adjust accordingly. I also recommend reading this [Functional Programming in JS page](http://reactivex.io/learnrx/) (and completing the exercises), which also mentions asynchronous code and callbacks (mostly exercises 34-5) – Sᴀᴍ Onᴇᴌᴀ Oct 20 '16 at 03:52
A colleague also shared with me http://youmightnotneedjquery.com/ - if you want to use promises without adding all of the overhead of jQuery, [reqwest](https://github.com/ded/Reqwest) and [then-request](https://github.com/then/then-request) look _promising_ (sorry I had to)... I mean they look like good options – Sᴀᴍ Onᴇᴌᴀ Oct 20 '16 at 21:11

score 0 · Answer 3 · answered Oct 19 '16 at 23:49

0

Try to use it like this, with jquery:

var array = [];
$.get('https://api.nasa.gov/planetary/earth/assets?lon=100.75&lat=1.5&begin=2014-02-01&api_key=DEMO_KEY',function(data){
       for(var i=0; i< data.results.length; i++) {
        array.push(data.results[i].date);
       }
    console.log(array);
});

Then in console you can see the result. Or just use the array variable for your needs

answered Oct 19 '16 at 23:49

Vyacheslav

157
4

How am I able to use the dates? Like add or subtract two dates? – John Oct 20 '16 at 01:08
you may access the data with index - array[i] - where i is index. Or search the array for the needed value. I don't know what do you currently need. Too add a data to array - array.push(data) - it will add to the end of array – Vyacheslav Oct 20 '16 at 03:06

Accessing NASA api using Javascript

3 Answers3