Prerequisites:

This Article is the second in a series on using Dot Notation in Siteglide. We strongly recommend reading the Article below first:

• Getting Started with Dot Notation

Introduction

If you're using dot notation, you'll probably come across arrays, which are lists of data. Each item in the list could contain any other Liquid type.

In the examples, we will look at Categories as a good example of arrays.

Creating Arrays

The parse_json tag can be used to create Arrays from a JSON string representation, as we created Objects in the previous article:

Example
HTML
Copy
{% parse_json shopping_list %}
  [
    "apples",
    "pears",
    "grapes"
  ]
{% endparse_json %}

Note:

1. Square brackets [] are used to represent Arrays in JSON, as opposed to single curly braces {} which were used for objects last time.

2. There are no “properties” in a normal array, unless one of the items itself is an object.

3. In this case, the array contains strings, so quotes are used, but it can contain other data types like numbers and would not need quotes.

We can also use the split filter to coerce an array from a String. Either by splitting on a delimiter like a comma or by splitting on an empty string to make an array containing each individual character.

Example
Liquid
HTML Result
Copy
{% capture original_string %}12,24,46{% endcapture %}
{% assign array = original_string | split: "," %}
{% assign character_list = original_string | split: "" %}
{{ array }}
{{character_list}}

Accessing Arrays

An array is a group or list of data.

In Siteglide for example, each WebApp item for example has a field called category_array which stores a list of the IDs of every Category assigned to that item. The more categories an item belongs to, the longer the array. E.g. { "category_array":["98479", "111111"] }

If you try to use standard dot notation as we practised in the previous Article, you will be able to output the array as it is using the key category_array and the liquid {{this.category_array}}:

["98479", "111111"]

However, there aren't many places where this would actually be helpful. It would probably be more useful to do one of the following:

• Access one of the Array items by its Index

• Loop over the array Items

• Find the length of the array (how many items are there?)

Accessing an Array by its Index

Arrays have an index, which means the items are numbered. In Siteglide (and in JavaScript) Arrays are zero-indexed, meaning the first item has the index of 0 while the second item has the index of 1.

We can access the first value in the category_array by its index using the following Liquid: {{this.category_array[0]}}outputs 98479

Note that straight after the key, we give the index number of the value we want in square brackets. If the array contained objects, you could go a step further and access one of their properties with a dot after the square brackets.

Looping the Array to Access all Values in it

We can access all values in the Array using a Liquid For Loop:

Example
liquid
Copy
{% for item in this.category_array %}

  {{item}}<br><br>

{% endfor %}

This outputs:

Example
bash
Copy
98479
111111

Finding the Length of an Array

You can find the length of an array using a Liquid filter: {{this.category_array | size}} outputs: 2

Learn more about looping

We’ll add another tutorial about looping in future, but for now you can read more about advanced Liquid looping techniques here:

https://documentation.platformos.com/api-reference/liquid/loops

Next Article

Next, we'll look at how you can use dot-notation to work with WebApp collections: Using WebApp Collections