How to: Target an img through NASAs api-CodePudding

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!

CodePudding user response：

If you want all the img_src from many (?) photos in a new array:

const imgArray = apiResponse.photos.map(p => p.img_src);

If you just want the first img_src from the first photo:

const img = apiResponse.photos[0].img_src;

CodePudding user response：

Thx. Tried targeting the first img_src but getting this error in the console: nasa.js:24 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0') at marsImg (nasa.js:24)

const marsImg = async () => {
  //importing the img
  const header = { headers: { Accept: "application/json" } };
  const res = await axios.get(
    "https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=2015-6-3&api_key=LXzoeDP12bLimV0TdOVjJeI2uQa1TXAHmVtdkky1",
    header
  );
  // console.log(res.photos[0].img_src);
  const img = res.photos.map((p) => p.img_src);
  //output on webpage
  const imgDoc = document.querySelector("#mars");
  imgDoc.src = res.photos[0].img_src;
};
marsImg();

CodePudding user response：

I came this far now. In the console I'm at level (res.data.photos) where res is the response from the query:

(4) [{…}, {…}, {…}, {…}]
0: {id: 102685, sol: 1004, camera: {…}, img_src: 'http://mars.jpl.nasa.gov/msl-raw-images/proj/msl/r…edr/fcam/FLB_486615455EDR_F0481570FHAZ00323M_.JPG', earth_date: '2015-06-03', …}
1: {id: 102686, sol: 1004, camera: {…}, img_src: 'http://mars.jpl.nasa.gov/msl-raw-images/proj/msl/r…edr/fcam/FRB_486615455EDR_F0481570FHAZ00323M_.JPG', earth_date: '2015-06-03', …}
2: {id: 102842, sol: 1004, camera: {…}, img_src: 'http://mars.jpl.nasa.gov/msl-raw-images/proj/msl/r…edr/rcam/RLB_486615482EDR_F0481570RHAZ00323M_.JPG', earth_date: '2015-06-03', …}
3: {id: 102843, sol: 1004, camera: {…}, img_src: 'http://mars.jpl.nasa.gov/msl-raw-images/proj/msl/r…edr/rcam/RRB_486615482EDR_F0481570RHAZ00323M_.JPG', earth_date: '2015-06-03', …}
length: 4
[[Prototype]]: Array(0)

How do I enter in an array? I've tried with another dot but it doesn't work: res.data.photos.img_src but I get 'undefined'.