# JSON / Object Tutorial
**URL:** https://community.thunkable.com/t/json-object-tutorial/1085666
**Category:** Tutorials and DIY Guides
**Tags:** firebase, community, webapi, json, object, intermediate, novice, tutorial
**Created:** [February 7, 2021, 11:39am UTC](https://community.thunkable.com/t/json-object-tutorial/1085666 "2021-02-07T11:39:49Z")
**Posts on this page:** 18
**Page:** 1
### Author:  [@drted](https://community.thunkable.com/u/drted)
#### Post date: [February 7, 2021, 11:39am UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/1 "2021-02-07T11:39:49Z")
Working with JSON data is a common Thunkable Discussion topic. Here I will try to answer the most common questions and provide solutions to the most common problems.
This tutiorial has six parts:
1. [Basic JSON](https://community.thunkable.com/t/json-object-tutorial/1085666/2)
2. [JSON Errors](https://community.thunkable.com/t/json-object-tutorial/1085666/)
3. [Intermediate JSON](https://community.thunkable.com/t/json-object-tutorial/1085666/4)
4. [Advanced JSON](https://community.thunkable.com/t/json-object-tutorial/1085666/5)
5. [Firebase Realtime DB and Cloud Variables](https://community.thunkable.com/t/json-object-tutorial/1085666/6)
6. [Web API](https://community.thunkable.com/t/json-object-tutorial/1085666/7)
The companion project with all examples can be [found here](https://x.thunkable.com/projectPage/601efcc715209c1fd57a3921).
---
### Author:  [@drted](https://community.thunkable.com/u/drted)
#### Post date: [February 7, 2021, 11:40am UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/2 "2021-02-07T11:40:54Z")
**Part 1 Basic JSON**
_Key Ideas_
1. **J** ava **S** cript **O** bject **N** otation (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?**
**J** ava **S** cript **O** bject **N** otation (JSON) is a standard cross platform text format for sharing data. Since Thunkable is [built on Blockly](https://developers.google.com/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)](https://en.wikipedia.org/wiki/Object-oriented_programming), 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](https://docs.thunkable.com/variables) 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](https://www.w3schools.com/js/js_json_syntax.asp)
---
### Author:  [@drted](https://community.thunkable.com/u/drted)
#### Post date: [February 7, 2021, 11:41am UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/3 "2021-02-07T11:41:06Z")
**Part 2 JSON Errors**
**Un-Thunkable**
In a perfect world, everyone would have everything they need for an abundant life. Guess what, we don’t live in a perfect world. 💩 happens. When it does, Thunkable misbehaves ☠. But these misbehaviors are predictable. This section will cover the most common errors and misbehaviors when working with JSON in Thunkable. When you understand the [fundamentals of JSON](https://community.thunkable.com/t/json-object-tutorial/1085666/2) and how Thunkable misbehaves, you will be able to identify 90% of all JSON-related errors immediately.
**null Object**
`null` is a little tricky to describe. It is not the word “null”. It is not a blank or empty value. It is simply nothingness!
Thunkable does NOT like null. Thunkable will crash. If we create a variable, set it to null, then try to treat it as an object, the thunkable app will crash.
When using the Web Live Test, the screen simply goes blank (white). When using the android live test, you will receive a message:
Likewise, trying to set a property of a null will cause Thunkable to crash:
The simpliest way to fix this problem is to first check to make sure the object is not null.
And don’t worry about this affecting the end user experience. If you app is working correctly, they will never see this message. 🤔
**null Value**
What if an object has been defined, the name has been defined, but the value is null?
This is where things get a little wierd. If the value is set to null and you display it in a label, it will show null. That _looks_ like the value is “null”.
But let’s take a closer look by asking thunkable to generate the JSON from the object
Notice anything strange? alias is surrounded by quotes, but null is not. [Remember](https://community.thunkable.com/t/json-object-tutorial/1085666/2) that JSON values containing strings are enclosed by quotation marks?
> [@drted](#):
>
> 
Once again, `null` is not the letters n-u-l-l, but a special case. Hence, it is stored in JSON as if it were a number. Weird, but true. 😖
Here is a straightforward illustration of the point that a null value _without quotes_ is not a word, but a special value.
The key lesson here is that even if the label shows the word null, you need to check for the special value of null (found in the logic blocks).
**Text is not JSON**
Working with external services ([Web APIs, data sources, web viewers, etc.](https://community.thunkable.com/t/json-object-tutorial/1085666/7)) often share date using JSON. [As discussed previously](https://community.thunkable.com/t/json-object-tutorial/1085666/2), the `get object from JSON` block can convert text to a Thunkable object. But what if the JSON is not propertly formatted?
In the example below, the text is missing the final `}`
Thunkable simply crashes when this is attempted. Web Apps just go blank, device Live Test have an error message we have seen before.
To keep the app from crashing, there are a few simple checks you can make:
1. Trim off leading and trailing spaces
2. Check that the first character is a `{` and the last character is a `}`
3. If the string checks out, use it.
4. If the string doesn’t check out, show a warning message
**Variable not object**
Despite our best efforts, occasionally a variable is set to an unexpected value. This can often occur when you accidentally set the variable to the JSON string, not a JSON object.
This will return the result `undefined`.
If you were paying attention to the `null` discussion, you might expect `undefined` to be something other than the string undefined. Well you would be right. Unfortunately `undefined` is **not** a string and there is no special block called `undefined`. But all hope is not lost! You can create a check that Thunkable will recognize by comparing the _expected_ value to a _known_ `undefined` value.
The good new is that you don’t actually need to do this. This type of error usually only occurs during development. As soon as you display the variable and see undefined, you now know what one of the sources is. Another source is described below.
**Property does not exist**
Similarly, if the variable is an object, but the _property_ doesn’t exist, you will also get a result of undefined.
Strategies to prevent this from occuring are discussed in the [Intermediate JSON](https://community.thunkable.com/t/json-object-tutorial/1085666/4) and [Advanced JSON](https://community.thunkable.com/t/json-object-tutorial/1085666/5) discussions below.
**[object Object]**
Just as Thunkers sometimes treat JSON text as a Thunkable objects, if you are anything like me, you will eventually treat an object like text. Luckily, setting a label to an object creates a very distinctive message.
**Summary**
If you survived this TL;DR post, you now can troubleshoot the following errors when working with JSON:
1. Thunkable crashes
2. Thunkable displays undefined
3. Thunkable displays [object Object]
4. Thunkable displays null
Congratulations!, looking for the 4 situations will resolve 19 out of 20 JSON related problems. the remaining issues will be addressed in the sections below.
---
### Author:  [@drted](https://community.thunkable.com/u/drted)
#### Post date: [February 7, 2021, 11:41am UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/4 "2021-02-07T11:41:25Z")
**Part 3 Intermediate JSON**
_Under construction_
1. Objects with multiple properties
2. Nested Objects
3. Arrays/Lists
Now that you understand [Basic JSON](https://community.thunkable.com/t/json-object-tutorial/1085666/2) and [JSON Errors](https://community.thunkable.com/t/json-object-tutorial/1085666/3) we can now expand into more complex JSON topics.
**Objects with multiple properties**
In it’s simpliest form, JSON is made of name:value pairs. But the power of JSON resides in the create of objects with mulitple properties. Let’s expand the example of` {"alias":"drted"}` to include mulitple properties.
Now the JSON is starting to look like a real application (a user profile).
Displaying any property follows the same pattern used in JSON basics
**Nested Objects**
Now we are ready to talk about how objects are REALLY used! Object can be nested inside of other objects.For this example I will create a sub object containing various ways to contact the user
There are mulitple way to navigate nested JSON objects. The [Advanced JSON Tutorial](https://community.thunkable.com/t/json-object-tutorial/1085666/5) will cover how to navigate complex unknown nested JSON objects. For now, let’s look a 2 basic techniques.
Although it takes a few extra blocks the most straightfoward way to navigate nested objects is to set a variable for each level of the hierarchy.
The first block sets Level 1 to the value in the `contacts` property. Since the `contacts` property is another object, I can once again use the `get property...of object` block to retrieve the value of the email property. Now I can simply set the label to the value in Level 2.
An alternative technique involves using nested `get property ... of object` blocks. Start with the property of the deepest nested property. In this case, the email property in level 2 of the object.
Then, instead of supplying the object directly, I access the contact property of the Nested Object variable
Once you understand this technique, it is a fast and easy solution requiring very few blocks. For reasons we will discuss later, I would recommend against this technique.
How are nested objects translated into JSON text?
> {
> “alias”:“drted”,
> “status”:“Power Thunker”,
> “location”:“Corvallis, Oregon, USA”,
> “contacts”:{“[email":"drtedwilliams@gmail.com](mailto:email%22:%22drtedwilliams@gmail.com)”,“mobile”:“1-503-555-5555”,“twitter”:“@drdrinkie”}
> }
Notice the contacts property contains another set of braces. This is an important clue when working with external JSON sources: Mulitple sets of braces mean nested objects.
**JSON Arrays (aka Thunkable Lists)**
We have now seen how objects, bound by sets of braces `{}`, can be nested one inside another. But there is another way to nest objects within a JSON string, Arrays. Thunkable refers to JSON Arrays as lists. I will use those terms interchangeably.
List are bound by brackets `[]` and elements in a list are separated by commas, much like properties of a JSON object. You may find it helpful to think of a JSON array as if it were a JSON object without the names. For instance here are 2 examples of JSON text:
JSON Object: `{"alias":"drted" ,"status":"Power Thunker","location":"Corvallis"}`
JSON Array:` ["drted", "Power Thunker", "Corvallis"]`
And their Thunkable Blocks
Although Thunkable blocks separate OBJECT (pink) blocks from LIST (baby blue) bocks, the JSON DNA of the Thunkable list is revealed in the ability to use the `generate JSON from object block` on a Thunkable list object:
For more information on JSON Arrays, check out this article [5. Arrays, Objects, Functions and JSON - Mixu's Node book](http://book.mixu.net/node/ch5.html).
In the example above, the list contained text (aka strings), but lists can include anything, including objects:
Notice that since it is a LIST of OBJECTS, the braces `[]` are the first and last characters, while the brackets `{}` are inside the braces.
Similarly, an object can contain a list:
Notice in this example, because the OBJECT is the top level element and the list is a PROPERTY of the object, the brackets `{}` are the top level and the braces are inside the property `friends`
If you survived this TL;DR post, you can now:
1. Create objects with multiple properties
2. Create and identify objects within objects
3. Create and identify list of objects and objects with lists
That is a heck of a lot of technical content. Try building a few apps using what you have learned before you move on to the next lesson, where we will explore how to programatically navigate JSON hierarchies.
---
### Author:  [@drted](https://community.thunkable.com/u/drted)
#### Post date: [February 7, 2021, 11:41am UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/5 "2021-02-07T11:41:35Z")
**Part 4 Advanced JSON**
_coming soon_
---
### Author:  [@drted](https://community.thunkable.com/u/drted)
#### Post date: [February 7, 2021, 11:42am UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/6 "2021-02-07T11:42:07Z")
**Part 5 Firebase Realtime DB and Cloud Variables**
_coming soon_
---
### Author:  [@drted](https://community.thunkable.com/u/drted)
#### Post date: [February 7, 2021, 11:42am UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/7 "2021-02-07T11:42:21Z")
**Part Web API**
_coming soon_
---
### Author:  [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [February 7, 2021, 4:30pm UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/8 "2021-02-07T16:30:34Z")
This is great @drted! Very useful to beginners with JSON like me.
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [February 7, 2021, 6:33pm UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/9 "2021-02-07T18:33:10Z")
Oh wow! Hugely useful. And very timely since my students are diving into APIs and JSON for the first time. Thank you for making this!
---
### Author:  [@jeffd](https://community.thunkable.com/u/jeffd)
#### Post date: [February 17, 2021, 8:35pm UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/10 "2021-02-17T20:35:43Z")
Excellent tutorial. PLEASE keep them coming.
---
### Author:  [@codeswept](https://community.thunkable.com/u/codeswept)
#### Post date: [February 18, 2021, 4:12am UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/11 "2021-02-18T04:12:47Z")
Yes, please do continue these awesome tutorials!
---
### Author:  [@drted](https://community.thunkable.com/u/drted)
#### Post date: [February 21, 2021, 1:25am UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/12 "2021-02-21T01:25:20Z")
Sorry for the lag @jeffd, @codeswept, @tatiang. I’ve had a couple of other projects demanding my attention (work, continuing education, etc.)
---
### Author:  [@celebytes20212iy4](https://community.thunkable.com/u/celebytes20212iy4)
#### Post date: [February 23, 2021, 8:19pm UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/13 "2021-02-23T20:19:52Z")
When is the web api tutorial coming out?
---
### Author:  [@drted](https://community.thunkable.com/u/drted)
#### Post date: [February 26, 2021, 12:29am UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/14 "2021-02-26T00:29:52Z")
Working on it… 😉
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [March 4, 2021, 2:04am UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/15 "2021-03-04T02:04:29Z")
Me first! 😉
> [@API JSON Tutorial (Video)](https://community.thunkable.com/t/api-json-tutorial-video/1140575):
>
> 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, …
---
### Author:  [@ismajimenez7945](https://community.thunkable.com/u/ismajimenez7945)
#### Post date: [October 29, 2021, 9:25pm UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/16 "2021-10-29T21:25:43Z")
I really need this :c
---
### Author:  [@rehoboth75](https://community.thunkable.com/u/rehoboth75)
#### Post date: [November 10, 2022, 5:44pm UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/17 "2022-11-10T17:44:51Z")
Drted, Great tutorial. Thank you. Please send more!
---
### Author:  [@ioannis](https://community.thunkable.com/u/ioannis)
#### Post date: [November 8, 2024, 1:29pm UTC](https://community.thunkable.com/t/json-object-tutorial/1085666/18 "2024-11-08T13:29:30Z")