Nested Unless tags break Liquid/Jekyll

70 Views Asked by At

I've been working with generating some JSON data from liquid tags, it seems that excluding the last comma in this JSON data is not happening when nesting 'unless' tags.

Please see answer below, this initial issue and question was not the problem.

<script id="suggest-json" type="application/json">
[
    {%- for item in site[page.collection] -%}
    {%- unless item.url == page.url -%}

    {% assign images = item.media | where: "type", "image" %}
    {% assign image = images.first %}
    {
        "url": "{{site.baseurl}}{{ item.url }}",
        "title": "{{ item.title }}",
        "subject": "{{ item.game }}",
        "image": "{{ image.thumbnail }}",
        "alt": "{{ image.thumbnail_alt }}"
    } {%- unless forloop.last -%},{%- endunless -%}

    {%- endunless -%}
    {%- endfor -%}
]
</script>

Undesired Output (The last comma is invalidating the Json):

[
    
    {
        "url": "/portfolio/levels/low-life/",
        "title": "Low-Life",
        "subject": "Final Verdikt: Source",
        "image": "https://picsum.photos/445/296?random=1",
        "alt": "Image 1"
    },
    {
        "url": "/portfolio/levels/prospekt/",
        "title": "Prospekt",
        "subject": "Final Verdikt: Source",
        "image": "https://picsum.photos/445/296?random=1",
        "alt": "Image 1"
    },    
    {
        "url": "/portfolio/levels/station/",
        "title": "Station",
        "subject": "Half-Life 2: Opposition",
        "image": "https://picsum.photos/445/296?random=1",
        "alt": "Image 1"
    },
    
    {
        "url": "/portfolio/levels/dredge/",
        "title": "Dredge",
        "subject": "Firearms: Source",
        "image": "https://picsum.photos/445/296?random=1",
        "alt": "Image 1"
    },   
    {
        "url": "/portfolio/levels/gravitas/",
        "title": "Gravitas",
        "subject": "Firearms: Source",
        "image": "https://picsum.photos/445/296?random=1",
        "alt": "Image 1"
    }, 
    {
        "url": "/portfolio/levels/navarro/",
        "title": "Navarro",
        "subject": "Firearms: Source",
        "image": "https://picsum.photos/445/296?random=1",
        "alt": "Image 1"
    },
    {
        "url": "/portfolio/levels/deadlock/",
        "title": "Deadlock",
        "subject": "Half-Life 2: Opposition",
        "image": "https://picsum.photos/445/296?random=1",
        "alt": "Image 1"
    },]

I've tried If statements, assigning booleans for isLast index, spacing and other formatting but nothing works...

Answer

The main issue here was separating my array into a new suggestions array minus the filtered item, which makes forloop.last actually happen. The other way was just ignoring the filtered item, but considering it still part of the array, which is why forloop.last was never true.

I also use {% raw %} tag to escape the JSON brackets for safe measure. I thought this might be causing Jekyll to try and process them as a tag, leading to an error with no actual error output in the --verbose build logs. Although I think the main culprit was the need to create a separate array to loop through.

{% assign suggestions = "" | split: ',' %}
{%- for item in site[page.collection] -%}
{%- unless item.url == page.url -%}
{% assign suggestions = suggestions | push: item %}
{%- endunless -%}
{%- endfor -%}
<script id="suggest-json" type="application/json">
[
{%- for item in suggestions -%}
    {% assign images = item.media | where: "type", "image" %}
    {% assign image = images.first %}
    {% raw %}
    {
    {% endraw %}
        "url": "{{ site.baseurl }}{{ item.url }}",
        "title": {{ item.title | jsonify }},
        "subject": {{ item.game | jsonify }},
        "image": {{ image.thumbnail | jsonify }},
        "alt": {{ image.thumbnail_alt | jsonify }}
    {% raw %}
    }
    {% endraw %}
    {%- unless forloop.last -%},{%- endunless -%}
{%- endfor -%}
]
</script>
0

There are 0 best solutions below