Hide elements when API doesn't return any data

Question

I'm using the Nasa API APOD Astronomy Picture of the Day I want to display the picture and explanation. On 2/3/21 they displayed a video. If they search one date and then search another I want to hide the elements that didn't receive data. The result I'm getting is once no data is received, the element is permanently hidden instead of only hiding the element that is not received. The idea was if the data was an image, display the img and hide the iframe. Else if the data is a video display the iframe and hide the image. If I search multiple dates once the element is hidden or display: 'none' the element is now permanently hidden instead of going through the if statement each time a new search is run.

// fetch response from api
fetch(url)
    .then(res => res.json()) //parse response as JSON
    .then(data => {
        console.log(data)
        // display image in the dom
        if(data.media_type ==='image') {
            document.querySelector('img').src = data.hdurl
            document.querySelector('iframe').style.display = "none"
        // display video in the dom
        }else if (data.media_type === 'video') {
            document.querySelector('iframe').src = data.url
            document.querySelector('img').style.display = "none"
        } else {
            alert('Error, please try again')
        }

        // display explanation of image / video
        document.querySelector('h3').innerText = data.explanation
    })
    .catch(err => {
        console.log(`error ${err}`)
    })
}

Data received (object):

{
    date: "2021-02-04",
    explanation: "Fifty years ago this Friday.....",
    hdurl: "https://apod.nasa.gov/apod/image,/2102/a14pan9335-43emj.jpg",
    media_type: "image",
    service_version: "v1",
    title: "Apollo 14: A View from Antares",
    url: "https://apod.nasa.gov/apod/image/2102/a14pan9335-43emj_900.jpg"
}

Answer 1

You need to change your code, so that it would display the img element if there's an image to be shown, and hide the iframe . The opposite applies if there's a video to be shown - you need to display the iframe and hide the image.

I've also introduced a CSS class none , which is a simple display: none . This is to that you can keep the original display value set for your elements, and not second guess while you're reverting the display to the previous value. Of course, you don't have to do this, but you might find it easier to manipulate in the long run.

Something like this will work.

var image = document.querySelector("img");
var ifr = document.querySelector("iframe");
var info = document.querySelector("h3");

fetch(url)
  .then(res => res.json()) //parse response as JSON
  .then(data => {
      console.log(data);
      // display image in the dom
      if(data.media_type ==='image') {
          // let's first set the source, and then display the image
          image.src = data.hdurl;
          image.classList.remove("none");

          // let's hide the iframe first, and then remove the source
          ifr.classList.add("none");
          ifr.src = "";
      // display video in the dom
      } else if (data.media_type === 'video') {
          // similar as above - hide first, remove source, and the opposite
          // for iframe
          image.classList.add("none");
          image.src = "";

          ifr.src = data.url;
          ifr.classList.remove("none");
      } else {
          alert('Error, please try again');
      }

      // display explanation of image / video
      info.innerText = data.explanation;
  })
  .catch(err => {
      console.log(`error ${err}`);
  });