Unable to see results after using API from the MealDB

I’m trying to understand the sequence of your app. From the main screen, I click on the middle recipes button and then it presents me with a list of recipes. After I click on a recipe, it gives me a search bar (text input). What am I supposed to type there? If I type ‘chicken’, what is the expected result? Recipes with chicken in them?

Shouldn’t I be able to search for an ingredient before viewing a list of recipes?

1 Like

Haha, I understand that this is unclear!! I want to make an app where you can search for recipes with a certain ingredient (your leftover actually). E.g. you have 2 paprika’s and don’t know what to make with it, you can use the app to search for recipes with paprika.
After clicking on a recipe you now see a search bar indeed, but that’s the point where i want to see the recipe itself. I don’t know what i have to use to see that, a label doens’t work (or my code is wrong :P)
:blush: :grin:
Hopefully this is a clear description, if not: ask me ofcourse :smiley:

Honestly, I didn’t even notice the GO! button as a user of your app. I just thought it was part of the instructions. It might help to put a border around it or a fill color so it’s clear that it’s something you tap.

Good one :D, will implement!

image

Part of the problem is that the green item block is just a text string. So when you click on a recipe after searching for an ingredient, you’re passing the value of the name of the recipe to the next screen (“Chicken Parmesan”). Instead, you want to pass the index block value to the next screen. That way, if the user tapped on the 3rd recipe in the listview, you can get the 3rd recipe from the JSON response and display it.

Just a side note: you should not re-use variables for different purposes. For example, on an earlier screen, you set the app variable “Recipe” to a list. And now you’re setting it to a text string (or an integer). Instead, create a new variable. You can call it something like selectedRecipeNumber. Then, use that to pass the value to the next screen (“RecipeSelected”).

2 Likes

Thanks!!! Implemented your comments :smiley: Sounds logical indeed. One question: which element do I have to use to show the recipe description etc.? I use ‘text input’ but i’ve got the idea thats wrong… still got no response from it

1 Like

hi everyone! I still haven’t figured out how to get the description etc. when i click on a specific recipe… :roll_eyes: :sleepy: Does someone have an idea what to do?

Hi guys! :slight_smile:

Hopefully someone can help me out! I’m still struggling with selecting a recipe and use the data from the api…
I want to show e.g. the name of the recipe and the description when the user select a recipe! So I need the following objects from my api:
https://www.themealdb.com/api/json/v1/1/lookup.php?i=52772
e.g. in above API I want to use:
idMeal, strMeal, strIngredient etc.

I tried to apply this in my blocks area but it still doesn’t work out :thinking: Does someone has a better idea?
First screen where the user can fill in an ingredient to search by:

blocks page of the recipe screen with the list of recipes blocks screen of the recipe selected screen which doesn’t work out rn because i don’t see anything

And this is the design screen i’ve made for the screen where one recipe is selected

@lyketakentz62lo,

Getting a Web API to run correctly is a very common topic in Thunkable Discuss.

I can see from you project that you have a very specific data flow in mind. That is great. But from long hours of wrestling with Thunkable and Web APIs, I would recommend you take the following approach to debugging the Web API. AFTER you are getting the data you want in a format you are expecting, then implement the data flow you want your users to experience.

First, put all of your web API blocks and values into one function. This eliminates issues with asynchronous processing, events not occuring, variables not being set correctly, etc. Thunkable has a variety of know behaviors and bugs around all of these issues. So it is best to isloate your Web API blocks initially to eliminate these confounding factors.

Next, display the results of your web API call into some label or text box on your screen. That will help you and everyone in the discussion group see what the API is returning.

Making those changes should give you a function that looks something like this:

Once you make those changes, please share the blocks in your function AND the output on the screen. I’m sure then someone will be able to give you some specific advice on how to address your issue.

Happy Thunking!

P.S. I suspect that either the response is not JSON, or the root of the JSON response is not a list.

2 Likes

No, I have used MealDB and receiving data is pretty straightforward JSON. @lyketakentz62lo is your API URL for receiving the recipe https://www.themealdb.com/api/json/v1/1/search.php?s= and whatever you want to search for?

Hi @codeswept :smiley:,
No, i used https://www.themealdb.com/api/json/v1/1/filter.php?i=
and then the user can fill in an ingredient theirselves, because it’s the goal of the app to seek recipes by means of an ingredient. But if you use my API link you only see the idMeal and not the detailed information… maybe that’s the problem?

1 Like

Have you checked out the JSON response from that link? To do that, enter in your browser tab: https://www.themealdb.com/api/json/v1/1/filter.php?i=cheese or some other ingredient. Copy that response and paste it in jsonformatter-online.com. That website makes all my json easier to handle. You can display it in a list-viewer, and then when a user clicks on any item to learn how to make it, you can seach for more details o the same meal by using the link https://www.themealdb.com/api/json/v1/1/search.php?s=[text from the list viewer item that the user clicked]. For example, if I searched by the ingredient cheese, I received 3 items in my list-viewer:
Big Mac
Cream Cheese Tart
Kumpir

When any of them is clicked, (when list-viewer1 item click), I save the green block item in a variable. Then I go to the next screen which has all the labels and other components required for viewing all the information and recipe. There, I have another web-api, and I will set its URL to https://www.themealdb.com/api/json/v1/1/search.php?s=[var what the user clicked]. Then, I will display everything(recipe, image, video, website, ingredients, quantities, area, instructions, category, tags) on that screen.
In short:
The user will input an ingredient in screen1, and click on one of the recipes provided then go to screen2. In screen2, web-api will search by what the user clicked, and display all the information.

I hope I got your question right.

Happy Thunking!

3 Likes

Thanks a lot for your comment! Busy rn but will look at this later today! :slight_smile:
Ill reply when implemented your comments :smiley:

1 Like