API JSON Tutorial (Video)

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