API JSON Tutorial (Video)

Using APIs in Thunkable and understanding how to parse JSON to get certain data from the API response is both a popular and a difficult aspect of using Thunkable. It’s not so much difficult because of Thunkable but because every API url format is different, every API documentation is different, every JSON response is different, etc.

In this video, I spend a lot of time talking you through some best practices. It’s not a quick tutorial because if you rush through setting up an API in Thunkable, you’re probably going to make a lot of mistakes and waste a lot of time.

If you watch this and still have problems – and you will! – make sure to include the following when you post a question on the forums:

  1. What is the name of the API you are using? For example: “Open Weather API”
  2. What is the full url of the API you are accessing (do not include the actual API key)? For example: https://api.openweathermap.org/data/2.5/weather?q=oakland&units=metric&APPID=[my_api_key]
  3. What is the full text of the response you get when visiting the full url in a browser (not in Thunkable)? That’s the entire wall of text that starts and ends with curly brackets { }
  4. If you are using Thunkable blocks, what is the value of the green “error” block?
  5. Include a screenshot of your blocks in Thunkable, especially the Web API URL and Web API Get blocks.
10 Likes

nice work Tatiang!

2 Likes

@tatiang Great Stuff :slight_smile:

2 Likes

Чудесно. Нуждаех се от това! :clap:

3 Likes

My favorite JSON formatter (https://jsonformatter-online.com) is alas no more. This one looks the most similar:

And in fact, it’s even better because after you click on “Tree Viewer”, you can click on a JSON value and it will show you the path to that property.

2 Likes

Great video @tatiang. Agree on the hardness of the web api post. Cloudinary is doing my head in. I just want to add a water mark, either to an existing image or when uploading. As you found, to many confusing methods on the cloudinary site.

1 Like

Have you seen this docs @japa6225a ?
https://cloudinary.com/documentation/image_transformations#adding_image_overlays

1 Like

Thank you mate, I have had several cloudinary pages that have been open for the last 6 days and well researched. Just cannot find the right combination.
image
I have climbed higher before.

Hi @tatiang this is an amazing job you’ve done! Thank you!

Do you plan to continue your tutorials and dive deeper into the details of API JSON? Working on my last project I got some unclear points regarding approaching API stuff so I did it my way which I’m totally sure is not proper and effective. I’d be happy to see tutorials or short tips on the next topics:

  • storing API key
  • API calls, how we can process them in an effective way
  • Storing temp data from API in order to optimize app running
  • variables in API calls
  • looped API calls
  • API calls + DB calls = displaying corresponding data
    etc
1 Like

I’ll consider it for sure. A few questions for you:

Usually this is stored in a variable as a text string. The main concern is whether or not other Thunkable users can see your key if you share the project. Is that what you’re referring to?

Can you say a little more about what you mean?

This would be a good addition to the tutorial.

Can you say a little more about this as well?

I would also add:

  • Displaying API data in a list viewer

I also store it in a variable as a text and I initialize it on the very first screen. I thought maybe it could be better to put it let say after authorization or store it in DB.

I mean some best practices. Probably one of them could be to request data from API once and then store it in a variable so after that you don’t need to request it again. But is it a good way to store it in app var or better to do it in stored var or even cloud var? And many more other questions :slight_smile:

This is also more about efficiency in applying. For eg I need to display information from API call but based on user data stored in DB. So I need to make a request to my DB and then to API what might work very slow.

2 Likes