JSON / Object Tutorial

[drted]

Part 1 Basic JSON

Key Ideas

1. JavaScript Object Notation (JSON) is a standard cross platform text format for sharing data
2. JSON is text composed of name-value pairs in the format {name:value}
3. Thunkable blocks allow for the creation, modification, coding, and decoding of JSON data

What is JSON?
JavaScript Object Notation (JSON) is a standard cross platform text format for sharing data. Since Thunkable is built on Blockly (which started as a graphic JavaScript code generator) it make sense to incorporate the JavaScript native JSON features to store and share data.

Seriously, what is JSON?
JSON is text. As the acronym suggestions, it is text which represents an object. And what is an object? A JSON object (which is different from an OOP object), is a collection of name-value pairs.

Come on @drted, what is a name-value pair?
Name-value pairs are just that. The name of a characteristics and the value of that characteristics. For instance, my Thunkable alias is drted. So the NAME is alias and the VALUE is drted. In JSON this would be represented as:

{"alias":"drted"}

A few things to notice:

1. The object starts and ends with braces { }
2. The name is enclosed by double quotes " "
3. The value is enclosed by double quotes " "
4. The name and value are separated by a colon :
5. Capitalization matters! Alias is not the same as alias

In later lessons, we will extend this format to more complex data structures. But it is CRITICAL to understand that JSON is fundamentally a text string composed of name value pairs.

Thunkable Object Blocks
But this is Thunkable, therefore we are going to use blocks, not code. So let’s create an app level variable with the object {"alias":"drted"} using the Create Object block

Next, let’s create a screen to allow the user to set the value of the alias and display the value in a label using the get property block

The output is:

Alternatively, the Set Property block could be used to change the alias property of an existing object:

Decoding and encoding JSON with Thunkable Blocks
The real power of JSON is communicating between applications. For Thunkable to communicate with other appliations, the object blocks need to be converted into JSON, and JSON will need to be converted into objects. To convert objects to JSON, use the generate JSON from object block:

To convert JSON into a Thunkable Object we can use the get object from JSON block:

As you probably already notice, it can get a little confusing remembering if a variable is text representing JSON or an object. Confusing these two forms and how to detect mistakes is the topic of the next section.

Special Case: Numbers
At the beginning of the lesson, I indicated that the value is encoled by double quotes " ". This is true when the value is a string (red Text block). If the value is stored as number (blue math block), no quotes are used:

Additional Reading

• w3school JSON