CODEWITHSUNDEEP
javascripthtmlspoonacular
aidan
aidan

Reputation: 11

nothing is displaying from API

Im trying to pull recipe data down from the spoonacular API but nothing is coming down. I had it working when getting the calories query but now ive added another query to the API that a user can input but nothing is displayed. here is my javascript code

function getMealList(){
    let searchInputTxt = document.getElementById('search-input').value.trim();
    let searchInputTxt1 = document.getElementById('search-input1').value.trim();
    fetch(`https://spoonacular-recipe-food-nutrition-v1.p.rapidapi.com/recipes/mealplans/generate?timeFrame=day&targetCalories?q=${searchInputTxt}&diet?q=${searchInputTxt1}&exclude=shellfish%2C%20olives`, {
    "method": "GET",
    "headers": {
    "x-rapidapi-host": "spoonacular-recipe-food-nutrition-v1.p.rapidapi.com",
    "x-rapidapi-key": "81022d9c79mshc06abb7d77ff30fp1e6950jsncae6e5e16400"
    }}).then(response => response.json())
    .then(data => {
        let html = "";
        if(data.meals){
            data.meals.forEach(meal => {
                html += `
                    <div class = "meal-item" data-id = "${meal.id}">
                        <div class = "meal-img">
                            <img src="https://spoonacular.com/recipeImages/${meal.id}-556x370.jpg">
                        </div>
                        <div class = "meal-name">
                            <h3>${meal.title}</h3>



                            <a href = ${meal.sourceUrl} target="_blank" class = "recipe-btn">Get Recipe</a>
                        </div>
                    </div>
                `;
            });
            mealList.classList.remove('notFound');
        } else{
            html = "Sorry, we didn't find any meal!";
            mealList.classList.add('notFound');
        }

        mealList.innerHTML = html;
    });

As you can see im allowing a user to enter in how much calories they want and what type of food for example vegetarian. Here is the API

"meals":[3 items
0:{6 items
"id":729342
"imageType":"jpg"
"title":"Cinnamon Roll Coffee Cake"
"readyInMinutes":120
"servings":8
"sourceUrl":"https://realhousemoms.com/cinnamon-roll-coffee-cake/"
}

Also here is the html with the input boxes

<div class = "meal-search-box">
          <input type = "text" class = "search-control" placeholder="Enter Calories" id = "search-input">
          <input type = "text" class = "search-control" placeholder="type" id = "search-input1">
          <button type = "submit" class = "search-btn btn" id = "search-btn">
            <i class = "fas fa-search"></i>
          </button>
        </div>

It probably something small but any help would be much appreciated

Upvotes: 0

Views: 376

Answers (1)

Pratham
Pratham

Reputation: 547

I ran this query and I'm getting a response. One thing I didn't find in your code is calling the getMealList function.

Upvotes: 0

Related Questions