I’m currently learning about importing data from an api and I’ve been trying to get some images from Nasa.
I had luck with the Picture of the Day,
const apodImg = async () => {
//importing the picture
const header = { headers: { Accept: "application/json" } };
const res = await axios.get(
"https://api.nasa.gov/planetary/apod?api_key=LXzoeDP12bLimV0TdOVjJeI2uQa1TXAHmVtdkky1",
header
);
console.log(res.data.hdurl);
//output on webpage
const img = document.querySelector("#apod");
img.src = res.data.url;
};
apodImg();
but not with getting images or just an image from the Mars project. The image is too nested in objects and arrays for me to know how to target it.
I took this api address to the webapp Postman and received the following data.
https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=2015-6-3&api_key=LXzoeDP12bLimV0TdOVjJeI2uQa1TXAHmVtdkky1
{ "photos": [
{
"id": 102685,
"sol": 1004,
"camera": {
"id": 20,
"name": "FHAZ",
"rover_id": 5,
"full_name": "Front Hazard Avoidance Camera"
},
"img_src": "http://mars.jpl.nasa.gov/msl-raw-images/proj/msl/redops/ods/surface/sol/01004/opgs/edr/fcam/FLB_486615455EDR_F0481570FHAZ00323M_.JPG",
"earth_date": "2015-06-03",
"rover": {
"id": 5,
"name": "Curiosity",
"landing_date": "2012-08-06",
"launch_date": "2011-11-26",
"status": "active"
}
}
I tried to target the img_src but I doubting that the underscore ‘_’ is legit in JavaScript. Anyway it’s not working for me. I’m getting this error in the console (Chrome):
nasa.js:23 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'img_src') at marsImg
Can someone guide me onwards. Thanks in advance!