Display JSON data with criteria in Jekyll - json

Question

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 1

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" %}
Or for a tag page :
---
tag: ux
title: my title
layout: default
---
{% include listByTag.html tag=page.tag %}