API JSON Tutorial (Video)

Tutorials and DIY Guides
, , ,
1

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.
21 Likes
2

nice work Tatiang!

2 Likes
3

@tatiang Great Stuff :slight_smile:

2 Likes
4

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

3 Likes
5

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.

4 Likes
6

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
7

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

1 Like
8

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.

9

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
10

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?

11

I would also add:

  • Displaying API data in a list viewer
12

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
13

I probably should have mentioned that a good starting point for a call to an API is to check for an error and then display either the error or the response:

image
image914×550 37.7 KB

I would do this before worrying about the “get property of object” blocks which can be very complicated.

1 Like
14

This is an amazing tutorial @tatiang! Great job, and kudos to you for putting in the hard work to make it!

3 Likes
15

Interesting… I just got an email from Thunkable about a new feature available within text boxes, related to APIs and JSON parsing:

https://docs.thunkable.com/objects#nested-values-and-values-from-arrays

So, if you wanted to replace the blocks I show at the 21:52 mark in the video above:

Screen Shot 2021-04-27 at 2.22.25 PM
Screen Shot 2021-04-27 at 2.22.25 PM742×97 40.1 KB

You could do that with these blocks:

image
image978×138 19.2 KB

:warning: This could easily confuse some people if they’ve been following along in my video so please only use this new feature if you already feel very comfortable working with JSON data.

In this case, we’re no longer working backwards to first get the object, then take a property from it, then get a list item from that, and finally get a property from that… instead, we’re specifying a path to a particular property.

For a deeply-nested JSON property, this would cut the required number of blocks significantly. It also allows for much more dynamic referencing of properties (you can use the “join” block as well as all the other Text drawer blocks to construct a path rather than having to connect the right blocks).

Just as an example of how quick this can be for figuring out a property path, I used Best JSON Viewer and JSON Beautifier Online to view some sample JSON data using the Tree Viewer button and then clicked on “Mustang”:

image

That site provides the path to a property when you click on it. For “Mustang”, it shows object–>cars–>0–>models–>2 at the top of the screenshot. Because JSON arrays use 0 as the first item index, you have to add 1 to any array index values you see there. So adding one to each index in the path gives me this path for Thunkable:

“cars[1].models[3]”

5 Likes
16

The thing is result[2].value is fine but limited to fix index number. It would be challenging to have the property name in the block to reference a variable as an index. For example result[app variable myCounter].value

17

@tatiang thank for sharing this. we need more tutorial on this subject.

18

Have you tried it? I would assume it would work with a variable. But maybe not?

1 Like
19

Ever since I got the email I was wondering if this works. Now that you mentioned it with an example I thought of throwing the question. But no, I have not tried it.

[Edit]
I tested it and it seems to work but you need to parse the text. I made this sample code

https://x.thunkable.com/projectPage/6089074124e9f00011fb36a3

1 Like
20

Specifying an array/list index by variable works, too… in this case, I’ve randomized the index:

https://x.thunkable.com/copy/1989faaff9acb8828f95489edaa4e817

1 Like