# JSON / Object Tutorial **URL:** \ **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:** 1\ **Showing post:** 4
**Author:** ![drted](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/drted/32/92694_2.png) [@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. ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/2/e295264a423a5d252f661818fc11962c6b701f67.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/a/fa31c6ad62b4b61d6906cd078b82b88106a3b240.png) Now the JSON is starting to look like a real application (a user profile). ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/5/e5a8d785e7573e3c02b56e84bf5d76bf57b6e04a.png) Displaying any property follows the same pattern used in JSON basics ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/1/919acb7a653bc4cc0e45d42e6cf2d26d2d1dcc20.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/2/724a674c9245e35bf19a804152d827be57359948.png) **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 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/d/3d02996e6edd0cd5fc8b92c74eed50d2f4e54541.png) 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. ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/6/b68ec477e3842983f73a47e2dc376803f733f433.png) 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. ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/a/fa1799c52d248b875b48b9c54a6f226623c064e6.png) Then, instead of supplying the object directly, I access the contact property of the Nested Object variable ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/3/83260f1bbac97339d63c6f35bc91e6dde5ad0aee.png) 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 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/8/a87a8ce6b80717113987e2787970c2618c883650.png) 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: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/9/090ce7967f213ba4acafaf25cfe678856b0c4089.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/4/54adb64930c7206acb4ade88bb691be29872d68b.png) 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: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/a/5a8b11d8e4f384d8951ab2fa92ba36bfac9fdb0b.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/4/54110b2fb66150945a86a6f4e2aae48d4e819cfa.png) 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: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/0/a0960458e8c49e5e7b3db9a87d6b1a0a41419530.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/8/9875ac8ce074d6286dc4c3a52ccec9aba5d99274.png) 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. --- _[View the full topic](https://community.thunkable.com/t/json-object-tutorial/1085666)._