Liquid Tutorial 7 - Looping over an object's properties

Returning to Objects

We covered how to access properties of Objects in a previous tutorial: Liquid Tutorial 3 - Creating Liquid objects and accessing their properties

Sometimes, you will see an Object where you want to access all of the properties in turn. Here is an example which can be tried on any Siteglide Starter Site using the Liquid: {{context.exports.categories}}

It outputs something like this (but I've shortened it here!):

Example
json
Copy
{
  "exports": {
    "categories": {
      "items": {
        "98490": {
          "id":"98490",
          "external_id":"category_57703",
          "name":"Womens",
          "parent":"98487",
          "slug":"women",
          "image":null,
          "description":null,
          "meta_title":"Womens",
          "meta_desc":null,
          "og_title":null,
          "og_desc":null,
          "og_type":null,
          "twitter_type":null,
          "full_slug":"/our-products/merch/clothes/womens"
        },
        "98489":{
          "id":"98489",
          "external_id":"category_57701",
          "name":"Men",
          "parent":"98487",
          "slug":"men",
          "image":null,
          "description":null,
          "meta_title":"Men",
          "meta_desc":null,
          "og_title":null,
          "og_desc":null,
          "og_type":null,
          "twitter_type":null,
          "full_slug":"/our-products/merch/clothes/men"
        }
      }
    }
  }
}

In this case, the items Object could have been an array, because it contains a list of items. However Object syntax is used (rather than an array), when an Object is used to represent a list of data, we can call it a map, but all the rules of Objects still apply.

A map is useful to store data when you know the ID of an item and want to fetch it using it's ID as a key.

Accessing an item in a map

Let's say you have the ID of a category 98490, but you want to display the Category's name. We can use dot notation to access it: {{context.exports.categories.items["98490"].name}} The square brackets and quotes are useful to remove ambiguity, showing that we are accessing an Object property by a String key, not accessing an array by an index.

This outputs: Women

Activity

Can you find the URL for the category: 98489 ?

Using another variable to access a property by name

Sometimes you need to access a property, but the key exists in another variable. You can use square brackets in your dot notation to use the contents of the variable as the key:

Example
liquid
Copy
{% assign my_example_category_id = "98490" %}

{{context.exports.categories.items[my_example_category_id].name}}

Looping over a Object’s Properties

You can loop over all keys in a key map using a Liquid FOR loop. Inside the loop, each key-value pair is treated as an array with the key being the first item in the array and the value being the second and last value in the array.

In this example, we'll loop over all Categories in context.exports.categories.data and see what data is available to output:

Example
Liquid
HTML Result
Copy
{% for item in context.exports.categories.data %}
  <!-- Outputs the key, which in this case is the ID of the category -->
  {{item[0]}} 
  <!-- Outputs the value, which in this case is an object containing this category's fields. You can see all available fields by outputting it. -->
  {{item[1]}}
  <!-- Outputs the name of the Category in this iteration of the loop. -->
  {{item[1].name}}
{% endfor %}