Cannot access liquid object properties (Jekyll)

Question

I am new to Jekyll and am creating a documentation website for one of my projects. I am trying to create a sidebar that displays the current page in the documentation. To store the structure of the documentation, I created the a file in the _data folder called subsections.yml . Here is the file:

- title: Quickstart # Section
  data:
    - Get started # Subsections
    - The basics
- title: API documentation # Another section with subsections
  data:
    - Introduction

Here is an excerpt from the html template file that will be used for pages in the documentation. (liquid template engine):

{% assign subsecs = site.data.subsections | where: 'title', page.section %}

The code above creates a variable called subsecs which is created by reading subsections.yml and filtering out the data on the section the documentation page is about. So if the page's section was Quickstart , the subsecs variable would contain all the data from the Quickstart section from subsecitons.yml . I tested this out with {{ subsecs }} and it worked by outputting:

{"title"=>"Quickstart", "data"=>["Get started", "The basics"]}

However, when I try to access a certain property from this object like title:

{{ subsecs.title }}

nothing is returned. Why is this happening, and how can I access property methods in liquid? The syntax looks correct, bu when I try it, an empty string is rendered.

I tried looking at the liquid documentation, but found nothing other than method.property , which doesn't work for some reason. I also looked at similar SO questions.

Answer 1

The where filter is returning an array.

{% assign subsecs = site.data.subsections | where: 'title', page.section %}
{{ subsecs | inspect }} 

inspect filter prints => [{"title"=>"Quickstart", "data"=>["Get started", "The basics"]}] brackets denotes an array.

You can do:

{% assign subsecs = site.data.subsections | where: 'title', page.section | first %}
{{ subsecs | inspect }}

The first filter extracts the first element of your array.

inspect filter now prints => {"title"=>"Quickstart", "data"=>["Get started", "The basics"]}

You can now access your object's properties like subsecs.title .