Tutorial

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 advanced dot notation arrays and key maps using webapp collections tutorial 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) {"id" "98656","properties" {"name" "the latest music","slug" "the latest music" etc 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 also have a tool 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