Reading API Data

[Jlarranaga]

What's the problem you're trying to solve?

I get an error that it can't read the 0 index of an array but it reads it.

Post any code you think might be relevant (one fenced block per file)

results:

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

What is your best guess as to the source of the problem?

Not too sure

What things have you already tried to solve the problem?

Google

Paste a link to your repository here

https://github.com/Jlarranaga/Project2-NASA

[timmshinbone]

console log the data you're trying to display and share the results here. Looks like links doesn't exist

[Jlarranaga]

So I console logged it and it does read it. but I get the error when I put it in the img src tag. Results

[timmshinbone]

looks like i.links[0].href is an object? that has a key called image? so maybe it needs to be i.links[0].href.image

[Jlarranaga]

That didn't work. Still the same issue. Here is a screenshot of the data I am pulling from. I want the 'href' from the 'links' array

[timmshinbone]

Instead of a screenshot can you copy and paste the entirety of one of these objects here in a code block so I can see how it needs to be referred to?

[Jlarranaga]

items: { href: 'https://images-assets.nasa.gov/video/Mars Sample Return Media Reel/collection.json', data: [ { album: [Array], description: "Compilation of b-roll for media. Collecting samples from Mars and bringing them back to Earth will be a historic undertaking that starts with the launch of NASA's Perseverance rover, part of the Mars 2020 mission. Perseverance will collect samples and leave them on Mars for a future mission to retrieve and return to Earth. NASA and the European Space Agency (ESA) are solidifying concepts for this Mars sample return campaign. The current concept includes a lander, a fetch rover, an ascent vehicle to launch the sample container to Martian orbit, and a retrieval spacecraft with a payload for capturing and containing the samples and then sending them back to Earth. Credit: NASA/JPL-Caltech, ESA, NASA/GSFC and NASA/GRC For more information, visit https://www.jpl.nasa.gov/missions/mars-sample-return-msr/", title: 'Mars Sample Return Media Reel', nasa_id: 'Mars Sample Return Media Reel', media_type: 'video', keywords: [Array], date_created: '2020-04-21T00:00:00Z', description_508: 'Mars Sample Return Media Reel', center: 'JPL' } ], links: [ { href: 'https://images-assets.nasa.gov/video/Mars Sample Return Media Reel/Mars Sample Return Media Reel~thumb.jpg', rel: 'preview', render: 'image' }, { href: 'https://images-assets.nasa.gov/video/Mars Sample Return Media Reel/Mars Sample Return Media Reel.vtt', rel: 'captions' } ] }

[Jlarranaga]

items:  {
  href: 'https://images-assets.nasa.gov/video/Mars Sample Return Media Reel/collection.json',
  data: [
    {
      album: [Array],
      description: "Compilation of b-roll for media. Collecting samples from Mars and bringing them back to Earth will be a historic undertaking that starts with the launch of NASA's Perseverance rover, part of the Mars 2020 mission. Perseverance will collect samples and leave them on Mars for a future mission to retrieve and return to Earth. NASA and the European Space Agency (ESA) are solidifying concepts for this Mars sample return campaign. The current concept includes a lander, a fetch rover, an ascent vehicle to launch the sample container to Martian orbit, and a retrieval spacecraft with a payload for capturing and containing the samples and then sending them back to Earth.    Credit: NASA/JPL-Caltech, ESA, NASA/GSFC and NASA/GRC  For more information,  visit https://www.jpl.nasa.gov/missions/mars-sample-return-msr/",
      title: 'Mars Sample Return Media Reel',
      nasa_id: 'Mars Sample Return Media Reel',
      media_type: 'video',
      keywords: [Array],
      date_created: '2020-04-21T00:00:00Z',
      description_508: 'Mars Sample Return Media Reel',
      center: 'JPL'
    }
  ],
  links: [
    {
      href: 'https://images-assets.nasa.gov/video/Mars Sample Return Media Reel/Mars Sample Return Media Reel~thumb.jpg',
      rel: 'preview',
      render: 'image'
    },
    {
      href: 'https://images-assets.nasa.gov/video/Mars Sample Return Media Reel/Mars Sample Return Media Reel.vtt',
      rel: 'captions'
    }
  ]
}

[timmshinbone]

Please share the exact console log you're using to get that data

[Jlarranaga]

ohh ok. `<%- include('../partials/header') %>

NASA Image and Video Library Index

<% imageVideo.collection.items.forEach(function(i){ %> <% console.log('items: ', i)%> <% console.log('title: ', i.data[0].title)%> <% console.log('nasa id: ', i.data[0].nasa_id)%> <% console.log('image: ', i.links[0].href.image)%>

<% const img = i.links[0].href.image %>

<%= i.data[0].title%>

Image Details

<% }) %>

<%- include('../partials/footer') %>`

[timmshinbone]

^please reformat or just share the EXACT console log in question

[Jlarranaga]

<% console.log('image: ', i.links[0].href.image)%>

[Jlarranaga]

This is where it's needed. <% const img = i.links[0].href.image %> <img src="<%= img %>" alt="NASA Image" class="card-img-top mt-3">

[Jlarranaga]

This is how I had the console log before and the console log works but still throws the error. <% console.log('image: ', i.links[0].href)%>

[timmshinbone]

ok gimme five mins and we'll 1:1 about it

[Jlarranaga]

ok

[timmshinbone]

Some of the items in the array contain an images array, others do not. So this was not a reference error, but a problem with inconsistency in the API response. Solving this will be as simple as adding an if statement that looks for that array, displays the data if it's there, displays nothing if it's not there.

[Jlarranaga]

Got it!