Change log

JSON (parsing via Liquid)

This component parses JSON data for use in Liquid, either from a remote source, a local file, or string.

{% component type: "json", source_type: "<your-json-source-type>", source: "<your-json-source>" %}

Parameters and Options

Parameter
Values
Required
Description
type
json
This system parameter identifies the type of component for processing the data.
source_type
path
url
string
Defines the type of JSON source you will be working with.
path The JSON file will be found at a local, relative file path, eg: '/some/path/filename.json'
url The JSON data will be found at an external (or local) location via an absolute URL, eg: 'https://some.domain/some_api'
string The JSON data will be provided directly to the component source parameter as a string, eg: '{"some":"value"}'
source
<YOUR JSON FILE PATH OR STRING>
The local file path, data URL, or JSON string to parse (corresponding to your source_type value).
layout
<path/to/layout>

Path to file that will contain the Liquid layout content to be parsed.

If an empty string, nothing will be rendered.
If paramater is not included, the default virtual layout will be rendered (see below).

collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

Liquid Output

Let's assume your JSON source is a list of students in a class and is simply a string available on the page you're working on. To make it easier to work with we'll use a Liquid capture, with the variable name of jsonExample, to grab that JSON string:

{% capture jsonExample %}
{
    "class": {
        "id": 123456,
        "name": "Science 101",
        "students": [
            {
                "iq": 160,
                "name": "Einstein"
            },
            {
                "iq": 160,
                "name": "Hawking"
            },
            {
                "iq": 3,
                "name": "Wilson"
            }
        ]
    }
}
{% endcapture %}

You can then more easily use this captured variable in the component tag:

{% component type:"json", source_type: "string", source: "{{jsonExample}}" %}

Providing this JSON to the component results in it being parsed into the Liquid scope ready to be used in your Liquid logic. Therefore, the full output is a JSON object matching the source.

{
  "class": {
    "id": 123456,
    "name": "Science 101",
    "students": [
      {
        "iq": 160,
        "name": "Einstein"
      },
      {
        "iq": 160,
        "name": "Hawking"
      },
      {
        "iq": 3,
        "name": "Wilson"
      }
    ]
  }
}

Virtual Layout

Based on the above example, if not using any custom layout or collection, the default virtual layout is simply {{this}}, which will output the full JSON object:

{
  "class": {
    "id": 123456,
    "name": "Science 101",
    "students": [
      {
        "iq": 160,
        "name": "Einstein"
      },
      {
        "iq": 160,
        "name": "Hawking"
      },
      {
        "iq": 3,
        "name": "Wilson"
      }
    ]
  }
}

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

You can provide a layout file that holds the Liquid logic and markup for rendering your parsed JSON data.

In this example, a .layout file has been created in a directory called "layouts", eg: /layouts/student-list.layout.
This file contains the following Liquid markup:

<p><strong>Student List for {{this.class.name}}:</strong></p>
<ul>
{% for i in this.class.students %}
    <li>{{i.name}} ({{i.iq}})</li>
{% endfor %}
</ul>

Now, this file path can be supplied to the component tag to be used as the data's template:

{% component type:"json", source_type: "string", source: "{{jsonExample}}", layout: "/layouts/student-list.layout" %}

Redering in the following:

Student List for Science 101:

  • Einstein (160)
  • Hawking (160)
  • Wilson (3)

This data is also accessible directly on the Page or Template via a Liquid Collection by adding collectionVariable to the Component and suppressing the layout.

{% component type:"json", source_type: "string", source: "{{jsonExample}}", layout: "", collectionVariable: "jsonCollection" %}

You could then render the list of students, similar to the above example using the variable, directly on the page instead of via a layout file:

<p><strong>Student List for {{jsonCollection.class.name}}:</strong></p>
<ul>
{% for i in jsonCollection.class.students %}
    <li>{{i.name}} ({{i.iq}})</li>
{% endfor %}
</ul>

Related Articles

  • Liquid Objects & Usage
    Working with Liquid
    Treepl has implemented the full standard Shopify Liquid library. See the External Resources below for...
  • Liquid Objects & Usage
    Liquid Filters
    Liquid Filters allow you to modify the output of a Liquid object, whether that's adding something to it, removing something from it, executing a calculation, creating an array, or a wide variety of other powerful functions.
  • Liquid Objects & Usage
    {{ this }} object
    This Liquid object is globally accessible in every liquid template or layout and outputs specific...
  • Liquid Objects & Usage
    {{ request }} object
    This Liquid object is globally accessible in every liquid template or layout and outputs various...
  • Liquid Objects & Usage
    {{ liquidContext }} object
    This Liquid object is globally accessible in every liquid template or layout and outputs a...
  • Liquid Objects & Usage
    {{ siteglobals }}
    This liquid object will output any custom configure Site Information data (found in the Admin's main menu under 'Settings' > 'Site Information').
  • Liquid Objects & Usage
    {{ member }} object
    This liquid object will output the Member's details of whom submitted a Form. You can...
  • Liquid Objects & Usage
    {{ workflow }} object
    This liquid object will output the Workflow details of a submitted Form. You can use...
  • Learning Liquid
    Part 1: Introduction to Liquid
    This free online course covers every aspect of using the Liquid templating language in Treepl CMS - from the very basics right through to advanced implementations.

    You’re welcome.
  • Learning Liquid
    Part 2: Liquid in Treepl CMS
    In this part of the course we’ll explore how Liquid is implemented in treepl CMS and the overall concepts on using it to harness your website data.
  • Learning Liquid
    Part 3: Using Liquid Filters
    In this part of the course we’ll explore using Liquid Filters to transform and manipulate the display of your Treepl CMS website data.
  • Learning Liquid
    Part 4: Advanced Liquid Tags
  • Liquid Components
    domain_settings
    This module component retrieves settings associated with the current domain, or optionally from another specified domain configured in the site instance.
  • Extras
    Migrating from Liquid 2.0 to 3.0
    This article describes differences and possible required actions for migrating from the Liquid rendering engine v2.0 to v3.0.

External Resources

There are currently no external resources available.

Please let us know if you have any other contributions or know of any helpful resources you'd like to see added here.

Questions?

We are always happy to help with any questions you may have.
Visit the Treepl Forum for community support and to search previously asked questions or send us a message at support@treepl.co and we will consult you as soon as possible.