Liquidにて何とかして変数にオブジェクトを追加する方法
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>
実際に動作するサンプルは以下の通りです。