0

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

General Grievance
  • 4,555
  • 31
  • 31
  • 45
aidan
  • 11
  • You should start by checking what the response actually contains. – CBroe Sep 03 '21 at 09:44
  • I would consider removing the API key from the code in your question. Someone might start using up your credits. – Jacob Riches Sep 03 '21 at 10:00
  • 1
    You posted another question [here](https://stackoverflow.com/questions/69037075/my-get-recipe-buttons-arent-bringing-me-to-the-external-page-where-the-recipes). Was that one resolved? Is this a different issue? – General Grievance Sep 03 '21 at 12:42
  • did you call the function? I couldn't see anything – Hamid Sep 03 '21 at 12:51
  • I call it above searchBtn.addEventListener('click', getMealList); – aidan Sep 03 '21 at 13:49
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Sep 07 '21 at 09:16

1 Answers1

0

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

Pratham
  • 497
  • 3
  • 7