How to properly parse complex JSON in pure JS?

Question

JavaScript

There is a rather complex JSON file as input data. Here's the piece that caused the trouble:

{
  "items": [
    {
      "reasons": [
        {
          "id": "4791",
          "date": "2016-03-16",
          "reason": {
            "id": "017",
            "title": "Подрядчик не уложился в срок",
            "description": "[Описание инциндента]"
          }
        },
        {
          "id": "4696",
          "date": "2016-01-18",
          "reason": {
            "id": "008",
            "title": "Заказчик не оплатил очередной этап работ",
            "description": "[Описание инциндента]"
          }
        }
      ],
      "person": {
        "id": "192",
        "name": "Иванов Иван Иванович",
        "link": "/persons/192/",
        "photo": "/persons/192/photo.jpg"
      }
    },
    {
      "reasons": [
        {
          "id": "4785",
          "date": "2016-03-24",
          "reason": {
            "id": "005",
            "title": "Задержка сроков поставки",
            "description": "[Описание инциндента]"
          }
        }
      ],
      "person": {
        "id": "168",
        "name": "Петров Виктор Алексеевич",
        "link": "/persons/168/",
        "photo": "/persons/168/photo.jpg"
      }
    }
  ]
}

Watch better here . The structure is more clearly visible.

So, we have a list that stores employee data and a list of reasons. You need to display this data on a web page in the form of blocks, where 1 block = 1 employee with their own unique list of reasons. It turns out that if this week there are 2 employees, then there should be two blocks on the page, if there are 3 employees, then there should also be 3 blocks.

As a result, something like this should turn out:

<div class="items">
  <div class="person">
    <div class="title">
      <a class="title_link" href="/persons/192/">
        <span class="title_name">Иванов Иван Иванович</span>
        <img src="/persons/192/photo.jpg" class="title_photo">Иванов Иван Иванович</img>
      </a>
    </div>
    <div class="reasons">
      <div class="reason">
        <div class="reason_date">21.03.2016</div>
        <div class="reason_title">Подрядчик не уложился в срок</div>
      </div>
      <div class="reason">
        <div class="reason_date">18.01.2016</div>
        <div class="reason_title">Заказчик не оплатил очередной этап работ</div>
      </div>
      <!-- Следующая причина -->
    </div>
  </div>
  <div class="person">
    <div class="title">
      <a class="title_link" href="/persons/168/">
        <span class="title_name">Петров Виктор Алексеевич</span>
        <img src="/persons/168/photo.png" class="title_photo">Петров Виктор Алексеевич</img>
      </a>
    </div>
    <div class="reasons">
      <div class="reason">
        <div class="reason_date">24.03.2016</div>
        <div class="reason_title">Задержка сроков поставки</div>
      </div>
      <!-- Следующая причина -->
    </div>
  </div>
  <!-- Следующий человек -->
</div>

The main problem is that I don't know how to properly "parse" this file using JS. Please help me to do this.

Answer 1

https://jsfiddle.net/cofh1wna/
will you figure it out yourself?