How To Set Fetch Data In to Array Using JavaScipt And Set Data In To innerHTML Boostrap card

I Have Fetch Methord 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 => {
            console.log(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">Card title</h5>
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>         
      </div>
            `
        })
}

The API returns data as follows:

count: 7000
from: 0
hits: Array(10)
0:
recipe: {uri: "http://www.edamam.com/ontologies/edamam.owl#recipe_1b6dfeaf0988f96b187c7c9bb69a14fa", label: "Pizza Dough", image: "https://www.edamam.com/web-img/284/2849b3eb3b46aa0e682572d48f86d487.jpg", source: "Lottie + Doof", url: "http://www.lottieanddoof.com/2010/01/pizza-pulp-fiction-jim-lahey/", …}
__proto__: Object
1:
recipe: {uri: "http://www.edamam.com/ontologies/edamam.owl#recipe_0209cb28fc05320434e2916988f47b71", label: "White Pizza", image: "https://www.edamam.com/web-img/dfe/dfe2e44c86334a3a3a5f774dda576121.jpg", source: "Food52", url: "https://food52.com/recipes/40095-white-pizza", …}
__proto__: Object
2:
recipe: {uri: "http://www.edamam.com/ontologies/edamam.owl#recipe_77db6e25dffe1836d4407cf4575f0141", label: "Chorizo, caper & rocket pizza", image: "https://www.edamam.com/web-img/7fe/7fee72cbf470edc0089493eb663a7a09.jpg", source: "BBC Good Food", url: "http://www.bbcgoodfood.com/recipes/1506638/chorizo-caper-and-rocket-pizza", …}
__proto__: Object
3:
recipe: {uri: "http://www.edamam.com/ontologies/edamam.owl#recipe_c9bf37296a0126d18781c952dc45a230", label: "Pizza Frizza recipes", image: "https://www.edamam.com/web-img/94a/94aeb549b29ac92dced2ac55765f38f9", source: "Martha Stewart", url: "http://www.marthastewart.com/284463/pizza-frizza", …}
__proto__: Object
4:
recipe: {uri: "http://www.edamam.com/ontologies/edamam.owl#recipe_b2ebad01df2a319d259c2d3f61eb40c5", label: "Margarita Pizza With Fresh Mozzarella & Basil", image: "https://www.edamam.com/web-img/d72/d72d1b7dd988e3b340a4b90ed3d56603.jpg", source: "Big Girls Small Kitchen", url: "http://www.biggirlssmallkitchen.com/2010/06/cooking-for-others-bff-pizza-party.html", …}
__proto__: Object
5:
recipe: {uri: "http://www.edamam.com/ontologies/edamam.owl#recipe_1b25671a32284038b57ad8b49c44af68", label: "Grilled BLT Pizza recipes", image: "https://www.edamam.com/web-img/2ac/2ac98d88117ff8f2327d302ab290b164", source: "Food Republic", url: "http://www.foodrepublic.com/recipes/grilled-blt-pizza-recipe/", …}
__proto__: Object
6: {recipe: {…}}
7: {recipe: {…}}
8: {recipe: {…}}
9: {recipe: {…}}
length: 10
__proto__: Array(0)
more: true
q: "pizza"
to: 10

And I Need To set Fetch Data to innerHTML Boostrap card. But To Do that I need to set fetch data into an Array. How Can I Set My Fetch Data an Array and how to set Fetch Data to innerHTML Boostrap card..?

Thank You..!

Answer

I think what you need from the API are the recipes, so the API returns them in the hits property. The hits property is an array of recipes

The properties in the recipe object are; SO you can pick what you need,

['uri', 'label', 'image', 'source', 'url', 'shareAs', 'yield', 'dietLabels', 'healthLabels', 'cautions', 'ingredientLines', 'ingredients', 'calories', 'totalWeight', 'totalTime', 'cuisineType', 'mealType', 'dishType', 'totalNutrients', 'totalDaily', 'digest'];

async function sendApiRequest() {
    let APP_ID = 'f61bb958';
    let APP_Key = '7c465e19d8e2cb3bc8f79e7a6e18961e';
    let INPUT_VALUE = document.getElementById('inputRecipe').value;
    const response = await fetch(`https://api.edamam.com/search?app_id=${APP_ID}&app_key=${APP_Key}&q=${INPUT_VALUE}`);
    const data = await response.json();

    document.getElementById('ripeCard').innerHTML = ''; // Resetting the content of the element

    // Iterating through the array of recipes and destructuring the result object to give only the recipe property
    data.hits.forEach(({recipe}) => {
        document.getElementById('ripeCard').innerHTML += `
       <div class="card" style="width: 18rem;">
           <img src="${recipe.image}" class="card-img-top" alt="...">
          <div class="card-body">
          <h5 class="card-title">${recipe.label}</h5>
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="${recipe.url}" class="btn btn-primary">Go somewhere</a>         
      </div>`;
    });
}

sendApiRequest();
<input id="inputRecipe" value="pizza">
<div id="ripeCard"></div>