在Liquid中使用JavaScript数组遇取值为空问题求助

Liquid是服务端渲染模板语言，页面加载时先在服务器执行完所有Liquid代码，再把生成的HTML发送到浏览器；而JavaScript是客户端脚本，只有浏览器拿到页面后才会运行。你的代码里，Liquid代码{% assign myLiquidArrayLiquid = myLiquidArray | json %}在服务器运行时，myLiquidArray这个变量根本不存在（JS还没执行，window对象都没创建），所以自然返回null。

方案1：直接用Liquid获取URL参数（推荐） #

既然目标是拿URL里的filter.p.m.custom.film_type参数，完全可以跳过JS，用Liquid内置的request对象直接获取：

{% assign selectedFilmTypes = request.params['filter.p.m.custom.film_type'] | split: ',' %}
{% for item in selectedFilmTypes %}
  {{ item }}
{% endfor %}

• 说明：request.params会自动获取URL中的查询参数，多个同键名的参数会用逗号拼接，用split: ','就能转成数组遍历。

方案2：用JS直接渲染内容（依赖JS处理时用） #

如果必须用JS做复杂参数解析，那就直接用JS把结果插入页面，不要依赖Liquid：

<script>
 var queryString = previousURL;
 var urlParams = new URLSearchParams(queryString);
 var selectedFilmTypes2 = urlParams.getAll('filter.p.m.custom.film_type');
 // 找到要插入内容的容器
 const listContainer = document.getElementById('film-types-container');
 // 遍历数组生成内容
 selectedFilmTypes2.forEach(type => {
   const typeItem = document.createElement('p');
   typeItem.textContent = type;
   listContainer.appendChild(typeItem);
 });
</script>

<!-- 提前预留内容容器 -->
<div id="film-types-container"></div>

Liquid的执行顺序永远在JS之前，服务器端完成Liquid渲染后才会把页面发给浏览器执行JS，所以Liquid根本访问不到任何客户端JS创建的变量。

内容的提问来源于stack exchange，提问作者franz deborah