API JSON Tutorial (Video)

@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.

4 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

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:

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

1 Like

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

3 Likes

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:

You could do that with these blocks:

: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

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

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

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

1 Like

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

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

Hi, bro. I want to get data from any API, ie: input is website url, output is information table. My API are investing.com, finance.yahoo… Pls, help me! Thanks

Watch my video and you should be able to figure it out. If you need help, start a new topic and provide details about what you’ve tried including screenshots (see the first post for a list of information you need to include).

1 Like