Как правильно разобрать сложный JSON на чистом JS?

Question

mainshtab @mainshtab

Как правильно разобрать сложный JSON на чистом JS?

В качестве входных данных есть довольно сложный по структуре JSON файл. Вот кусок, который вызвал трудности:

{
  "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"
      }
    }
  ]
}

Смотреть лучше здесь. Более наглядно видна структура.

Итак, у нас есть список, в котором хранятся данные сотрудника и список причин. Нужно отображать эти данные на веб-странице в виде блоков, где 1 блок = 1 сотрудник со своим уникальным списком причин. Получается, что если на этой неделе 2 сотрудника, значит на страничке должно быть два блока, если 3 сотрудника, значит и блока должно быть тоже 3.

В итоге должно получиться что-то такое:

<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>

Основная проблема в том, что я не знаю, как правильно «разобрать» этот файл с помощью JS. Помогите, пожалуйста, это сделать.