Liquidにて何とかして変数にオブジェクトを追加する方法

2023/10/30（月）

Liquidテンプレートエンジンにて、愚直にassignを用い変数にオブジェクトを追加しても上手いこといきません。Liquidではオブジェクトの直接的な作成がサポートされていないためです。

例えば以下の様なオブジェクトを変数jsonDataに追加しても<li>タグの中身は空になってしまいます。

{% liquid
assign jsonData = '{"name":"foo", "age":20, "enabled":true}'
%}

<ul>
  <li>{{ jsonData.name }}</li>
  <li>{{ jsonData.age }}</li>
  <li>{{ jsonData.enabled }}</li>
</ul>

また以下の様にrenderにて引数を渡した場合でも、受け取り側の変数には正しく値が入りません。

{% liquid
assign attrs = '{"name":"foo", "age":20, "enabled":true}'
render 'hoge.liquid', data: attrs
%}

上記の様に愚直に行うと正しく値を取得することができませんが、以下の様な文字列からJSONオブジェクトを生成するフィルタjsonStringToJsonObjectを登録し、Liquid側のフィルタに用いることで正しく値を取得することが出来るようになります。

/**
 * 文字列からJSONオブジェクトを生成する
 * @param string
 */
const jsonStringToJsonObject = (string: string) => {
  try {
    return JSON.parse(string);
  } catch (error) {
    console.error(error);
  }
}

例えばjsonToObjectという名前でフィルタを登録した場合は以下の様に使用します。

{% liquid
assign jsonData = '{"name":"foo", "age":20, "enabled":true}' | jsonToObject
%}

<ul>
  <li>{{ jsonData.name }}</li>
  <li>{{ jsonData.age }}</li>
  <li>{{ jsonData.enabled }}</li>
</ul>

実際に動作するサンプルは以下の通りです。