How to take n element from JSON in swig template

Question

I'm total newbie...

I've got some JSON

{
    "article": [
        {
            "id": "21",
            "type": "news",
            "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
            "summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
            "url": "http://www....",
            "website": "www...",
            "authors": [],
            "images": [
                {
                    "title": "",
                    "dateCreated": "",
                    "name": "",
                    "path": ""
                }
            ]
        },
        {
            "id": "22",
            "type": "news",
            "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
            "summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
            "url": "http://www....",
            "website": "www...",
            "authors": [],
            "images": [
                {
                    "title": "",
                    "dateCreated": "",
                    "name": "",
                    "path": ""
                }
            ]
        },
        {
            "id": "23",
            "type": "news",
            "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
            "summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
            "url": "http://www....",
            "website": "www...",
            "authors": [],
            "images": [
                {
                    "title": "",
                    "dateCreated": "",
                    "name": "",
                    "path": ""
                }
            ]
        }
    ]
}

This JSON have more than 3 elements. I dont know how to template in such order 2,3,1,4,5,6,7,8,...

How to loop once template whith json, and place value of properties in my html tags?

I want to have

<ul>
  <li>
    <img scr="path to object 2">
    <a href="path to object 2">title of object 2</a>
  </li>
  <li>
    <img scr="path to object 3">
    <a href="path to object 3">title of object 3</a>
  </li>
  <li>
    <img scr="path to object 1">
    <a href="path to object 1">title of object 1</a>
  </li>
  <li>
    <img scr="path to object 4">
    <a href="path to object 4">title of object 4</a>
  </li>
  <li>
    <img scr="path to object 5">
    <a href="path to object 5">title of object 5</a>
  </li>
  ...
  <li>
    <img scr="path to object n">
    <a href="path to object n">title of object n</a>
  </li>
</ul>

Any sugestion?

Answer 1

{% for article in articles %}
  {% if loop.index == 2 %}
    <li>
      <img src="{{ article.images[0].path }}" />
      <a href="{{ article.url }}">{{ article.title }}</a>
    </li>
  {% endif %}
{% endfor %}
{% for article in articles %}
  {% if loop.index == 3 %}
    <li>
      <img src="{{ article.images[0].path }}" />
      <a href="{{ article.url }}">{{ article.title }}</a>
    </li>
  {% endif %}
{% endfor %}
{% for article in articles %}
  {% if loop.index == 1 %}
    <li>
      <img src="{{ article.images[0].path }}" />
      <a href="{{ article.url }}">{{ article.title }}</a>
    </li>
  {% endif %}
{% endfor %}

and so on...