How to display API information within a modal?

Question

I want the information, specifically the cardBody to display within the modal below the image, instead of the caption "NASA Picture of the Day.

How do I display the cardBody information below the image within the modal, instead of the caption "NASA Picture of the Day", when the image is clicked on when loaded from the API?

const resultsNav = document.getElementById("resultsNav");
const favoritesNav = document.getElementById("favoritesNav");
const imagesContainer = document.querySelector(".images-container");
const saveConfirmed = document.querySelector(".save-confirmed");
const loader = document.querySelector(".loader");

// NASA API
const count = 3;
const apiKey = 'DEMO_KEY';
const apiUrl = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}&count=${count}`;

let resultsArray = [];
let favorites = {};

// Show Content
function showContent(page) {
  window.scrollTo({
    top: 0,
    behavior: "instant"
  });
  if (page === "results") {
    resultsNav.classList.remove("hidden");
    favoritesNav.classList.add("hidden");
  } else {
    resultsNav.classList.add("hidden");
    favoritesNav.classList.remove("hidden");
  }
  loader.classList.add("hidden");
}

// Create DOM Nodes
function createDOMNodes(page) {
  const currentArray =
    page === "results" ? resultsArray : Object.values(favorites);
  currentArray.forEach((result) => {
    // Card Container
    const card = document.createElement("div");
    card.classList.add("card");


    // Link that wraps the image
    const link = document.createElement("a");

    // link.href = result.hdurl;  -- full size image display when clicked

    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById("myImg");
    var modalImg = document.getElementById("img01");

    var captionText = document.getElementById("caption");
    img.onclick = function() {
      modal.style.display = "block";


      modalImg.src = event.target.src;
      captionText.innerHTML = event.target.alt;



    }

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }

    // Image
    const image = document.createElement("img");
    image.src = result.url;
    image.alt = "NASA Picture of the Day";
    image.loading = "lazy";
    image.classList.add("card-img-top");

    // Card Body
    const cardBody = document.createElement("div");
    cardBody.classList.add("card-body");

    // Card Title
    const cardTitle = document.createElement("h5");
    cardTitle.classList.add("card-title");
    cardTitle.textContent = result.title;

    // Save Text
    const saveText = document.createElement("p");
    saveText.classList.add("clickable");
    if (page === "results") {
      saveText.textContent = "Add To Favorites";
      saveText.setAttribute("onclick", `saveFavorite('${result.url}')`);
    } else {
      saveText.textContent = "Remove Favorite";
      saveText.setAttribute("onclick", `removeFavorite('${result.url}')`);
    }

    // Card Text
    const cardText = document.createElement("p");
    cardText.textContent = result.explanation;

    // Footer Conatiner
    const footer = document.createElement("small");
    footer.classList.add("text-muted");

    // Date
    const date = document.createElement("strong");
    date.textContent = result.date;

    // Copyright
    const copyrightResult =
      result.copyright === undefined ? "" : result.copyright;
    const copyright = document.createElement("span");
    copyright.textContent = ` ${copyrightResult}`;

    // Append everything together
    footer.append(date, copyright);
    cardBody.append(cardTitle, saveText, cardText, footer); //hide to make image display
    link.appendChild(image);
    card.append(link); // hide cardBody

    // Append to image container
    imagesContainer.appendChild(card);
  });
}

// Update the DOM
function updateDOM(page) {
  // Get favorites from local storage
  if (localStorage.getItem("nasaFavorites")) {
    favorites = JSON.parse(localStorage.getItem("nasaFavorites"));
  }
  imagesContainer.textContent = "";
  createDOMNodes(page);
  showContent(page);
}

// Get 10 images from NASA API
async function getNasaPictures() {
  // Show Loader
  loader.classList.remove("hidden");
  try {
    const response = await fetch(apiUrl);
    resultsArray = await response.json();
    updateDOM("results");
  } catch (error) {
    // Catch Error Here
  }
}

// Add result to favorites
function saveFavorite(itemUrl) {
  // Loop through the results array to select favorite
  resultsArray.forEach((item) => {
    if (item.url.includes(itemUrl) && !favorites[itemUrl]) {
      favorites[itemUrl] = item;
      // Show save confirmation for 2 seconds
      saveConfirmed.hidden = false;
      setTimeout(() => {
        saveConfirmed.hidden = true;
      }, 2000);
      // Set Favorites in Local Storage
      localStorage.setItem("nasaFavorites", JSON.stringify(favorites));
    }
  });
}

// Remove item from favorites
function removeFavorite(itemUrl) {
  if (favorites[itemUrl]) {
    delete favorites[itemUrl];
    localStorage.setItem("nasaFavorites", JSON.stringify(favorites));
    updateDOM("favorites");
  }
}

// On Load
getNasaPictures();

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3% 1fr 0.1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "header"
    "content"
}



.hero {
  grid-area: hero;
  background-color: blue;
}

.content {
  grid-area: content;
  background-color: orange;
  align-self: center;
  justify-self: center;
}



html {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: whitesmoke;
  overflow-x: hidden;
  font-family: Verdana, sans-serif;
  font-size: 1rem;
  line-height: 1.8rem;
}


.loader {
  position: fixed;
  z-index: 40;
  background: whitesmoke;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Navigation */
.navigation-container {
  position: fixed;
  top: 0;
}

.navigation-items {
  display: flex;
  justify-content: center;
}

.background {
  background: whitesmoke;
  position: fixed;
  right: 0;
  width: 100%;
  height: 60px;
  z-index: -1;
}

.clickable {
  color: #0b3d91;
  cursor: pointer;
  user-select: none;
}

.clickable:hover {
  color: #fc3d21;
}

/* Images Container */
.images-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card {
  margin: 10px 10px 10px;
  width: 300px;
  height: 300px;
}

.card-img-top {
  width: 300px;
  height: 300px;

}

.card-body {
  padding: 20px;
}

.card-title {
  margin: 10px auto;
  font-size: 24px;
}

/* Save Confirmation */
.save-confirmed {
  background: white;
  padding: 8px 16px;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  position: fixed;
  bottom: 25px;
  right: 50px;
  z-index: 500;
}

/* Hidden */
.hidden {
  display: none;
}

.brand {
  float: right;
}

.fave {
  margin-right: 50%;
}











#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

/* #myImg:hover {opacity: 0.7;} */

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}

<!-- Loader -->
<div class="loader hidden">
  <img src="rocket.svg" alt="Rocket Icon" />
</div>

<!-- Container -->

<div class="container">
  <div class="header">
    <div class="navigation-container">
      <span class="background"></span>
      <!-- Results Nav -->
      <span class="navigation-items" id="resultsNav">
      </span>
      <!-- Favorites Nav -->
      <span class="navigation-items hidden" id="favoritesNav">

      </span>
    </div>
  </div>


  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="column">
          <div id="myImg" alt="Snow" class="images-container"></div>
        </div>
      </div>
    </div>
  </div>



  <!-- The Modal -->
  <div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
  </div>


</div>

Answer 1

Each image object has the following keys:

  copyright
  date
  explanation
  hdurl
  media_type
  service_version
  title
  url

Currently you are using this pice of code to render the image:

// Image
    const image = document.createElement("img");
    image.src = result.url;
    image.alt = "NASA Picture of the Day";
    image.loading = "lazy";
    image.classList.add("card-img-top");

replace image.alt = "NASA Picture of the Day" for image.alt = result.title and it should give you what you need!