liquidからjsonファイルを読み込み処理したい

[SIN88]

データ管理をjsonでやりたいと考えています（特にloops処理が課題になっています）

assetsフォルダにdata.jsonを準備してsectionのコンポーネントから以下のようにjsonをimportしようとしたところただの文字列になってしまいできませんでした。

{% assign productsData =  'data.json' | asset_url | json %}

liquidからjsonを読み込み処理することは可能でしょうか。

よろしくお願いします。

[Qcoltd]

liquidの中にJSONを読み込み、それをオブジェクトとして扱いたい、ということかと思いますが、

それは現時点では難しいようです。

参考:

https://github.com/Shopify/liquid/issues/432

https://community.shopify.com/c/technical-q-a/creating-an-object-with-json-liquid-possible/td-p/4755...

https://stackoverflow.com/questions/57601890/is-it-possible-to-initiate-object-as-variable-in-liquid

有志の方が、

liquidの中で、JSONを扱えるようにするための工夫を下記にアップしてくれていますが、

https://github.com/culturekings/shopify-json-parser

We have found when looping over products in a collection can slow the liquid render time to greater than 5 seconds.

ページの表示速度が悪化するかもしれませんし、

現在、非推奨となっているincludeを使用する点も継続利用という観点では看過できないかもしれません。

ご存知だとは思いますし、

質問者様の要望にはそぐわない可能性が高いですが、

質問者様が扱おうとしているJSONの階層が浅いようでしたら、

split filterで配列として扱うという道もあるかもしれません。

例えば、snippets/array.liquidを用意し、

その中に、hoge,fuga,piyoと記載します。

下記のコードを準備します。

{%- capture array_string -%}
{% render "array" %}
{%- endcapture -%}
{% assign array = array_string | split: "," %}
{{ array[0] }}

このコードで、arrayの一番目の要素であるhogeが出力されます。

また、こちらについても、質問者様はご存知だと思いますが、

JavaScriptを利用する方法がよく紹介されています。

ブラウザ上ではなく、liquidの中で処理されたいということだとは思うので、

JavaScriptを使用する方法はお気に召さないかもしれませんが、

例えば、下記のようにすることでブラウザ上であればJSONを参照してページの表示を動的に変更することもできます。

{%- capture json_string -%}
{% render "json" %}
{%- endcapture -%}
<script>
  const json_string = `{{ json_string }}`;
  const obj = JSON.parse(json_string);
</script>

snippets/json.liquidを用意し、JSONを記載すると、

JavaScript変数のobjにそのJSONがobjectとして格納されます。

大した情報がなく恐縮です。

(キュー田辺)

[SIN88]

ありがとうございます。

やはり現時点では難しいのですね。。。

split filterで配列生成は行なっているのですが、あくまで簡単なデータのみです。

複雑なオブジェクトをもつ配列を上記の方法で生成するとなると可読性もとても悪く、現実的ではないと感じておりました。

回答ありがとうございました！