Iterogation JSON datafile in Jekyll produces double output

Question

I try to build a documentation site with Jekyll and thought it might be a good idea to store the main links in a JSON datafile.

Here's the JSON file:

{
    "home": {
        "name": "Home",
        "path": "/",
        "icon": "fas fa-home"
    },
    "faq": {
        "name": "FAQ",
        "path": "/faq",
        "icon": "fas fa-question"
    },
    "manuals": {
        "name": "Anleitungen",
        "path": "/manuals",
        "icon": "fas fa-book-open"
    }
}

Here's my template (part of it):

        <div class="navbar-menu">
            <div class="navbar-start">
                {% for rubrik in site.data.navigation %}
                {% for part in rubrik %}
                <a class="navbar-item{% if page.url == part.path %} is-active{% endif %}" href="{{ part.path }}">
                    <span class="icon"><i class="{{ part.icon }}"></i></span><span>{{ part.name }}</span>
                </a>
                {% endfor %}
                {% endfor %}
            </div>
        </div>

This actually produces this output:

       <div class="navbar-menu">
            <div class="navbar-start">


                <a class="navbar-item" href="">
                    <span class="icon"><i class=""></i></span><span></span>
                </a>

                <a class="navbar-item is-active" href="/">
                    <span class="icon"><i class="fas fa-home"></i></span><span>Home</span>
                </a>



                <a class="navbar-item" href="">
                    <span class="icon"><i class=""></i></span><span></span>
                </a>

                <a class="navbar-item" href="/faq">
                    <span class="icon"><i class="fas fa-question"></i></span><span>FAQ</span>
                </a>



                <a class="navbar-item" href="">
                    <span class="icon"><i class=""></i></span><span></span>
                </a>

                <a class="navbar-item" href="/manuals">
                    <span class="icon"><i class="fas fa-book-open"></i></span><span>Anleitungen</span>
                </a>


            </div>
        </div>

You see the output is doubled, once with empty variables of the outer loop, secondly with correct values from the inner loop.

Any hints? Is this a bug or am I just using it wrong? Haven't seen any advice that a for-loop is just for one level. Jinja2 for instance can do this. My Jekyll version used is 4.0 (newest).

Many thanks in advance.

Regards, Thomas

score 0 · Answer 1 · answered Sep 30 '19 at 14:59

When you loop in site.data.navigation, the loop returns an array like ["home", {"name"=>"Home", "path"=>"/", "icon"=>"fas fa-home"}].

If you try this code, you will certainly understand what's happening.

{% for rubrik in site.data.navigation %}
  <p>rubrik = {{ rubrik | inspect }}</p>
  <ul>
  {% for part in rubrik %}
    <li>part = rubrik[{{ forloop.index0 }}] = {{ part | inspect }}</li>
  {% endfor %}
  </ul>
{% endfor %}

In your case you can simply target rubrik[1] element like this :

<div class="navbar-menu">
  <div class="navbar-start">
    {% for rubrik in site.data.navigation %}
    {% assign p = rubrik[1] %}
    <a class="navbar-item{% if page.url == p.path %} is-active{% endif %}" href="{{ p.path }}">
      <span class="icon"><i class="{{ p.icon }}"></i></span><span>{{ p.name }}</span>
    </a>
    {% endfor %}
  </div>
</div>

Iterogation JSON datafile in Jekyll produces double output

1 Answers1