Hello everyone, hopefully someone can help me out! I’ve got a problem. I’m using Thunkable for the first time and I’m trying to use the MealDB API for a few weeks now.
API= https://www.themealdb.com/api/json/v1/1/filter.php?
I use ‘i=’ after above link to search by ingredient.
I want to make an app in which you can search for recipe by means of a specific ingredient. I followed some tutorials of NoCodeWithDarren and redid his actions from this tutorial: How to Use the Thunkable X Web API Component - YouTube, but I don’t get any results (see screenshots). I don’t know what I’m doing wrong so I was wondering if someone can help me out?!
Do you get any response from the server?
Thanks for responding! I only see what you see in the last screenshot, where the recipes should be listed there is a blank block on the page. or do you mean like in coding? cause I don’t know where or if I can see that at all…
One problem is that you are assigning “app ApiUrl” to the JSON response but then using “app IngredientSelected” in the “get property of object” block below that. You need to use the same variable in both places.
When working with JSON, it’s helpful to post the results you’re getting from a browser:
Here’s the response I get for https://www.themealdb.com/api/json/v1/1/filter.php?i=chicken:
{"meals":[{"strMeal":"Brown Stew Chicken","strMealThumb":"https:\/\/www.themealdb.com\/images\/media\/meals\/sypxpx1515365095.jpg","idMeal":"52940"},{"strMeal":"Chicken & mushroom Hotpot","strMealThumb":"https:\/\/www.themealdb.com\/images\/media\/meals\/uuuspp1511297945.jpg","idMeal":"52846"},{"strMeal":"Chicken Alfredo Primavera","strMealThumb":"https:\/\/www.themealdb.com\/images\/media\/meals\/syqypv1486981727.jpg","idMeal":"52796"},{"strMeal":"Chicken Basquaise","strMealThumb":"https:\/\/www.themealdb.com\/images\/media\/meals\/wruvqv1511880994.jpg","idMeal":"52934"},{"strMeal":"Chicken Congee","strMealThumb":"https:\/\/www.themealdb.com\/images\/media\/meals\/1529446352.jpg","idMeal":"52956"},{"strMeal":"Chicken Handi","strMealThumb":"https:\/\/www.themealdb.com\/images\/media\/meals\/wyxwsp1486979827.jpg","idMeal":"52795"},{"strMeal":"Kentucky Fried Chicken","strMealThumb":"https:\/\/www.themealdb.com\/images\/media\/meals\/xqusqy1487348868.jpg","idMeal":"52813"},{"strMeal":"Kung Pao Chicken","strMealThumb":"https:\/\/www.themealdb.com\/images\/media\/meals\/1525872624.jpg","idMeal":"52945"},{"strMeal":"Pad See Ew","strMealThumb":"https:\/\/www.themealdb.com\/images\/media\/meals\/uuuspp1468263334.jpg","idMeal":"52774"},{"strMeal":"Thai Green Curry","strMealThumb":"https:\/\/www.themealdb.com\/images\/media\/meals\/sstssx1487349585.jpg","idMeal":"52814"}]}
And when re-formatted at https://jsonformatter-online.com:
You can see that the first part of the “object” is “meals”. And within that there are ten items in a list/array. And within each meal item, there are three properties including strMeal. So you’ll have to build your blocks to start with the property “meals”, then with a list item #, and then take the property “strMeal”.
4 Likes
Thank you so much for your answers! 
I still have some questions haha, I understand what you’re saying but don’t know how to ‘code’ it… I did the below variant but ofc it doesn’t work…
1 Like
Just few things for you to consider.
In the [then do] of the API get block you should assign the green response to the variable response. You assigned it to APIURL.
Second, you are looping through response which is still empty. This loop [for each item “j” in list…] is never executed.
Third,
You are looking at the objects from back to front. The wrong way.
Forth,
You are trying to populate APIURL instead of the list for the results.
Hope that helps
2 Likes
Thanks for the help!! I’m still doing things wrong I know… I tried to implement your feedback but didn’t get point 2 and 4, or at least I didn’t know how to adjust it haha… I have below ‘code’ right now…
2 Likes
I didn’t have time this morning to set up the blocks and share that with you but I can do that later if you still need help. @muneer is exactly right and hopefully you can tweak the blocks a bit to figure things out.
Parsing JSON is definitely an advanced skill in my book…
If you do need more help, feel free to notify me with an @tatiang in a post or send me a private message.
3 Likes
Can you try this.
you want to get the object from the response. but you want to drill down deeper and get the meals object from within the response object
response object = {meals: [{dish:‘1’},{dish:‘2’}]
meals object = [{dish:‘1’},{dish:‘2’}]
so you can see the meals object is made of several objects itself. it is a list of objects in fact.
so for the loop, you need to loop through each object in the meals object list.
then for each individual meal object j (j represents each individual list item (each item is an JSON object in this case). each j object is made up of at least 3 properties [strMeal, strMealThumb, idMeal)
you want to get the value from the strMeal property for each j object (each meal in the list from the original response) and insert that into a list
then the list is displayed, alphabetically, in a list viewer for futher work to be done
project link: Thunkable
3 Likes
This demo should do the trick:
https://x.thunkable.com/copy/c66041100fca8a73e6b3426d8cb46071
I left an inactive set of blocks below the main ones. That “from Status label set Text” block should give you the meal name of the first item in the list of meals.
One of my students is building a similar app so it’s nice to get a little practice with recipe APIs.
3 Likes
You might find this video I made about JSON parsing for someone else to be helpful for understanding JSON formatting. The topic where I originally posted it is Google directions API and lists, in case you want to see the related blocks and larger context.
3 Likes
Thanks to all of you! Really appreciate all the information and effort you put in this 
I don’t have time right now because of work but will definitely look at this asap! I think I will have some questions afterwards haha but then I will send a message in here 
Thanks a lot lot lot!
3 Likes
Thanks! It works right now Strange thing that all the Thunkable tutorials I’ve watched on YouTube didn’t explain that you have or at least can put the api in API ‘simple’ field… 
I still have to adjust some little things to get it how I want but at least I get some response from the API so for now I’m very happy 
hi! When i click on the link I only see my own projects, no demo unfortunately…
I will watch them tomorrow! Thanks a lot 
Hi all,
I’ve got some questions. I want to adjust the list viewer into a search option, so the user can seek recipes with a specific ingredient. E.g. the user wants to have recipes with Chicken, he/she put the word chicken in the search area and the app generates recipes with it (so the results https://www.themealdb.com/api/json/v1/1/filter.php?i=CHICKEN will give). I unfortunately don’t get how to do above mentioned idea… I tried several things but want to show you two of them below (one in this post and the other in another because of the maximum pictures…):
- here you see what i got back, i need to decode a bit more i think?
hopefully someone can help!
Set variable recipe to an empty list with the “empty list” blue block just before your api call.
Thunkable doesn’t automatically understand you need that variable to be set up to accept a list of data. It assumes you are entering a single value or setting the variable to an entire array all at once.
With your example setting your variable as an empty list should alleviate this issue.
2 Likes
Thank you so much, that helped a lot! I see the response now
I think I’ll come up with another question regarding the screen after the user clicks on a recipe but i’ll try some things out first ofcourse
Thanks!
1 Like