Part 3 Intermediate JSON
Under construction
- Objects with multiple properties
- Nested Objects
- Arrays/Lists
Now that you understand Basic JSON and JSON Errors 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 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”,“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.
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:
- Create objects with multiple properties
- Create and identify objects within objects
- 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.