Accessing Data in Liquid Variables - Tutorial 1 - Using Dot Notation
This Liquid is useful when you are accessing a WebApp 'collection', creating a Categories layout, using a custom GraphQL query and more.
Prerequisites
Choose your favourite third party tool for parsing and formatting JSON. Everyone has a different favourite tool, but you can see a third party comparison here to help you get started and find one: https://geekflare.com/json-online-tools/ We'll look at this again below in "Using a Third Party Tool to Visualise Objects"
Introduction
Understanding dot notation is a really useful skill for Developers who are trying to get the most out of Siteglide and the platformOS technology it runs on. This Getting Started Article will cover:
What is dot notation?
How to find a property of an Object
How to chain dot-notation
The Data Tree
Visualising the Data Tree
You will come across the following terms which might be new:
Object
Array
Key-value Pairs
properties
Curly Bracket
This Article is intended to be the starting point for a Series of Articles involving dot notation.
What is dot notation?
Normally when you're accessing data on Siteglide, you simply want to access a single value. For example, on a Starter Site (using the WebApp installed by default, Gallery), you might need to output a Title on your Layout: {{this.Title}}
In this example, this outputs a String: The Latest Music
You could use this syntax from memory, or by referring to the Docs, but you're actually already using dot notation. The syntax above takes a variable this
which returns an object. .Title
is dot notation which specifies that the Developer wants to access the Title
which is a property of this
.
Note: Sometimes you may see something like this: {{this['Title']}}
This is the exactly same thing, except this alternative syntax also allows you to add spaces in field names. We'll cover this in more detail in the next Article.
Key Value Pairs
Another important piece of terminology is the concept of a Key-Value Pair.
A key is a place where data is stored; a value is the data itself.
In the previous example, this
and Title
are both keys. The key Title
has the value The Latest Music
.
Chaining
You can chain dot notation. The following example will output the first name of the User currently signed in to a Secure Zone: {{context.current_user.first_name}}
This accesses the context
object, then accesses its current_user
property and finally accesses the id
property of current_user
. current_user
can be considered an Object, because it has properties of its own, however, id
has no properties and is stored as a String.
The Data "Tree"
You can think of objects in pOS and Siteglide as a Tree. The Object you start on like context
or this
is like the trunk of the tree. Each time you use a dot to access a property, you are going one level down the tree, until you reach the branch of data you needed.
Just outputting this
on its own would show you the real JSON Object behind the first example in this Article and all of its properties: {{this}}
This outputs an object of data, which to start with is a little hard to read. That's because whitespace is removed for efficiency reasons. Adding the whitespace back in with a third party tool will allow us to read it more easily (see the next section).
Visualising the Object "Tree"
To make sense of the JSON that the Liquid outputs, you'll need a tool for automatically formatting the JSON data and adding whitespace. Some tools even help you visualise the data in other more advanced ways.
We don't have a favourite JSON parsing tool, but you can see a third-party comparison here: https://geekflare.com/json-online-tools/ Many Code Editing environments like VSCode also have a useful extension for prettifying JSON data.
Important Note
We'd recommend when parsing JSON using third party tools that you do not use sensitive Client data. It's best to use test data and publically accessible data when testing and developing dot-notation. We cannot verify that any third party tool will handle your data safely.
Visualising the Data
Here is an example of a tree-view. It's the JSON data with extra whitespace and newlines added for readability (colours too).
From this view you can make the same observations we made when using the <pre> tag, but it is easier because each level of the tree is indented and all keys are coloured light blue:
The first and last character is a curly bracket- this represents the this object we are accessing.
The key id has no properties, it has a value of
98656
which is stored as a String. this.id will be enough to access it.The key properties has properties which are accessible by dot notation. You can tell because the properties key is followed by more curly brackets indicating that it is an object. All the properties inside this set of curly brackets are properties of properties.
`{{this.properties.name}}`
will access the name property of properties.
Here is a chart view from the same tool. It shows more clearly how some objects are nested within others. You can use this to help you chain dot-notation to get the values you need.
A Special Case - Arrays
You may notice that category_array
looks slightly different in the examples above. This is because its value is an array. You can notice an array in your data when square brackets are used around a list of values separated by commas e.g "category_array":["98479", "111111"]
We will cover arrays in the next Article: Advanced Dot Notation: Arrays and Key Maps
Last updated