How to set fetch data In to img and div tags inside innerHTML

I have a JavaScript script that fetches API data like this:

async function sendApiRequest() {
    let APP_ID = "f61bb958";
    let APP_Key = "7c465e19d8e2cb3bc8f79e7a6e18961e"
    let INPUT_VALUE = document.getElementById("inputRecipe").value;
    console.log(INPUT_VALUE)
      
    fetch(`https://api.edamam.com/search?app_id=${APP_ID}&app_key=${APP_Key}&q=${INPUT_VALUE}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById("ripeCard").innerHTML = `
                <div class="card" style="width: 18rem;">
                    <img src="" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the </p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>`
        })
}

The API returns data as follows:

calories: 2620.983838835843,
cautions: ["FODMAP"],
cuisineType: ["italian"],
dietLabels: [],
dishType: ["main course"],
healthLabels: ["Vegetarian", "Pescatarian", "Egg-Free", "Peanut-Free", "Tree-Nut-Free", "Soy"],
image: "https://www.edamam.com/web-img/284/2849b3eb3b46aa0e682572d48f86d487.jpg",
ingredientLines: ["500 g bread flour(3 3/4 cups)", "2 1/2 tsp Dry Yeast instant or active (10"], 
label: "Pizza Dough",
mealType: ["lunch/dinner"],
shareAs: "http://www.edamam.com/recipe/pizza-dough-1b6dfeaf0988f96b187c7c9bb69a14fa/pizza",
source: "Lottie + Doof"

How can I set this data into my Bootstrap card component?

Answer

Use string concatenation to add the values from the object in your AJAX request to the HTML you output. As you’re using a template literal already, the syntax is very simple:

// mock response object from your AJAX call:
let data = {
  calories: 2620.983838835843,
  cautions: ["FODMAP"],
  cuisineType: ["italian"],
  dietLabels: [],
  dishType: ["main course"],
  healthLabels: ["Vegetarian", "Pescatarian", "Egg-Free", "Peanut-Free", "Tree-Nut-Free", "Soy"],
  image: "https://www.edamam.com/web-img/284/2849b3eb3b46aa0e682572d48f86d487.jpg",
  ingredientLines: ["500 g bread flour(3 3/4 cups)", "2 1/2 tsp Dry Yeast instant or active (10"],
  label: "Pizza Dough",
  mealType: ["lunch/dinner"],
  shareAs: "http://www.edamam.com/recipe/pizza-dough-1b6dfeaf0988f96b187c7c9bb69a14fa/pizza",
  source: "Lottie + Doof"
}

// inside then(data => {..
document.getElementById("ripeCard").innerHTML = `
  <div class="card" style="width: 18rem;">
    <img src="${data.image}" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">${data.label}</h5>
      <p class="card-text">${data.ingredientLines.join(', ')}</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>`;
<div id="ripeCard"></div>