CODEWITHSUNDEEP
jsonjekyll
alwingeorge
alwingeorge

Reputation: 11

Unable to loop over nested array in jekyll - JSON Data File

I'm using this data file to display the contens of a footer, I'm trying to render a list of links based on the array links1.items. The code i used to loop over it is given below. Could anyone tell me if there is somthing wrong with the code or how the json is structured.

/_data/footer.json

{
  "aboutus": [{
    "title": "About Us",
    "desc": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Eodem modo typi, qui nunc. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quamz nunc putamus."
  }],
  "links1": [{
    "title": "Useful Links",
    "items": [
      {
        "title": "Blog",
        "url": "#"
      },
      {
        "title": "Blog",
        "url": "#"
      },
      {
        "title": "Blog",
        "url": "#"
      },
      {
        "title": "Blog",
        "url": "#"
      }
    ]
  }]
}

Jekyll code

{% for item in site.data.footer.links1.items %}
  <li>
    <a href="{{item.url}}">{{item.title}}</a>
  </li>
{% endfor %}

Upvotes: 0

Views: 303

Answers (1)

David Jacquel
David Jacquel

Reputation: 52829

site.data.footer.links1 is an array containing one element. You can get it with site.data.footer.links1.first.

This code works :

{% for item in site.data.footer.links1.first.items %}
  <li>
    <a href="{{item.url}}">{{item.title}}</a>
  </li>
{% endfor %}

or remove brackets around links1 value

{
  "aboutus": [{
    "title": "About Us",
    "desc": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Eodem modo typi, qui nunc. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quamz nunc putamus."
  }],
  "links1": {
    "title": "Useful Links",
    "items": [
      {
        "title": "Blog",
        "url": "#"
      },
      {
        "title": "Blog",
        "url": "#"
      },
      {
        "title": "Blog",
        "url": "#"
      },
      {
        "title": "Blog",
        "url": "#"
      }
    ]
  }
}

Upvotes: 1

Related Questions