Nizamil Putra Nizamil Putra - 12 days ago 6
JSON Question

Display JSON data with criteria in Jekyll

I have a JSON file with the following structure:

{
"resources": [
{
"date": "Nov 7",
"content": [
{
"articleTitle":"The Distribution of Users’ Computer Skills: Worse Than You Think",
"articleUrl":"https://www.nngroup.com/articles/computer-skill-levels/?ref=boomkrak",
"articleAuthor": "Jakob Nielson",
"articleTag": "ux, web design"
},
{
"articleTitle":"How to Use Animation to Improve UX",
"articleUrl":"https://uxplanet.org/how-to-use-animation-to-improve-ux-338819e93bdb#.84b3m022s?ref=boomkrak",
"articleAuthor": "Nick Babich",
"articleTag": "ux, animation"
}
]
},
{
"date": "Nov 15",
"content": [
{
"articleTitle":" 7 Things Every Designer Needs to Know about Accessibility",
"articleUrl":"https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b#.5pgg5014x?ref=boomkrak",
"articleAuthor": "Jesse Hausler",
"articleTag": "ux, web design, accessibility"
},
{
"articleTitle":"Get the most out of your research with storytelling",
"articleUrl":"https://blog.intercom.com/get-the-most-out-of-your-research-storytelling/?ref=boomkrak",
"articleAuthor": "Jillian Wells",
"articleTag": "design research, collaboration"
}
]
}
]
}


I want to show the article based on each tag. For example, if I want to show
ux
articles, then all articles with
ux
tag should be displayed.

Anyone know how to do it in Jekyll?

Answer

Considering that your datas are in _datas/articles.json, you can use this include file (_includes/listbyTag.html) :

{% assign tag = include.tag %}
{% assign days = site.data.articles.resources %}
{% assign list = ""| split: "/" %} {% comment %} creates an empty array {% endcomment %}

{% for day in days %}
  {% for article in day.content %}
    {% if article.articleTag contains tag %}
      {% assign list = list | push: article %}
    {% endif %}
  {% endfor %}
{% endfor %}

{% if list.size != 0 %}
  <h3>Found {{ list.size }} posts for tag : {{ tag }}</h3>
  <ul>
    {% for post in list %}
      <li>{{ post.articleTitle }}</li>
    {% endfor %}
  </ul>
{% endif %}

Now you can include it anywhere with :

{% include listByTag.html tag="ux" %}