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

Key Value Pairs

Another important piece of terminology is the concept of a Key-Value Pair.

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 Object behind the first example in this Article and all of its properties:

{{this}}


This outputs:

{"id":"98656","properties":{"name":"The Latest Music","slug":"the-latest-music","enabled":true,"expiry_date":2145916800,"release_date":1569944546,"category_array":["98479"],"webapp_field_1_1":"images/about/about-2.jpg","webapp_field_1_2":"Crowd of people at a gig","webapp_field_1_3":"The Latest Music","webapp_field_1_4":"She packed her seven versalia, put her initial into the belt and made herself on the way.","webapp_name":"Gallery","webapp_slug":"gallery","webapp_detail":false,"webapp_detail_template":null,"webapp_detail_default_layout":"default","weighting":null,"meta_title":null,"meta_desc":null,"og_title":null,"og_desc":null,"og_type":null,"twitter_type":null},"create_date":"1571928375","last_edit_date":"1573551650","webapp_name":"Gallery","webapp_slug":"gallery","webapp_detail":false,"webapp_detail_template":null,"webapp_detail_default_layout":"default","name":"The Latest Music","slug":"the-latest-music","weighting":null,"release_date":1569944546,"expiry_date":2145916800,"enabled":true,"category_array":["98479"],"meta_title":null,"meta_desc":null,"og_title":null,"og_desc":null,"og_type":null,"twitter_type":null,"gallery_image":"images/about/about-2.jpg","image_alt":"Crowd of people at a gig","Title":"The Latest Music","Description":"She packed her seven versalia, put her initial into the belt and made herself on the way.","full_slug":"/gallery/the-latest-music"}


Now immediately this begins to look confusing. The next section will look at how to make sense of Objects that are Outputted on the Page.

Visualising the Object "Tree"

The Hash and JSON formats


By default, data you output in Liquid will be in the Hash format, and Liquid dot notation only works on the Hash format. 

You can also display the data in JSON format when you want to make sense of it. This is useful, because there are more tools for making JSON human-readable available on the Internet, as it is a very widely used language.

{{this | json}}


Wrapping this in a <pre> HTML tag will output a more readable view:

<pre>{{this | json}}</pre>

Let's look at a few things we can observe from the data:

  • 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.

You can learn more about the JSON format here: https://www.w3schools.com/js/js_json_objects.asp

Using a Third Party Tool to Visualise Objects- Optional


A quick disclaimer:

We do not endorse any particular third-party JSON tool and you use them at your own risk. The example screenshots below use the JSON Viewer Awesome extension. 


If your data is placeholder text and not a real Client's data,  you can use a third-party tool or browser extension to format the JSON object. You can search for one on the internet with the search terms: JSON parser and paste in your data to have it formatted to a more readable view. This is optional, but very helpful when you are debugging and not quite finding the data you want.

Here is an example of a tree-view:

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:

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

.

Related Articles

Did this answer your question?