Собрать сложный многомерный массив.

[re.void]

Дано:

[
			  {
				"EventStartDate": "17/10/2008",
				"EventType": "Restricted",
				"Event": "My Forum",
				"SessionStartTime": "18:00",
				"City": "Ryazan",
				"Type": "1on1",
				"RowCount": 0
			  },
			  {
				"EventStartDate": "17/10/2008",
				"EventType": "Restricted",
				"Event": "My Forum",
				"SessionStartTime": "15:10",
				"City": "London",
				"Type": "3on1",
				"RowCount": 1
			  },
			  {
				"EventStartDate": "24/11/2008",
				"EventType": "Conference",
				"Event": "AAA Test Event",
				"SessionStartTime": "15:10",
				"City": "Paris",
				"Type": "Meeting",
				"RowCount": 2
			  },
			  {
				"EventStartDate": "24/11/2008",
				"EventType": "Conference",
				"Event": "AAA Test Event",
				"SessionStartTime": "16:10",
				"City": "Moscow",
				"Type": "Breakfast",
				"RowCount": 3
			  }
			]

Необходимо сгруппировать по датам, названиям, типам ивентов и их сессий.

и тд. Скрипт цикла перебора массива:

var arr2 = [];
      for (var i = 0; i < arr1.length; i++) {
        if (arr2[arr1[i].EventStartDate] && arr2[arr1[i].EventStartDate].EventStartDate) {
            for (n in arr1[i]) {
                if (n != 'EventStartDate') {
                    arr2[arr1[i].EventStartDate][n] = (arr2[arr1[i].EventStartDate][n]) ? arr2[arr1[i].EventStartDate][n] + ";" + arr1[i][n] : arr1[i][n];
                }
            }
        } else {
            arr2[arr1[i].EventStartDate] = arr1[i];
        }

    }
    console.log('result', arr2);

Прошу помочь разобраться как переработать такой массив.
UPD: необходимый результат HTML

<div class="cib-day-elem">
    <div class="cib-label-am">
        <div type="text" class="event" name="dc_input0" id="dc_input0"><a class="cib-date">"EventStartDate(17/10/2008)"</a><br>
            <div class="cib-event"><a class="typeevent">"EventType"</a><a class="nevent">▶"Event"</a><br>
                <div class="cib-s1"><a class="tm">"SessionStartTime"</a><a>"City"</a><a class="type">"Type"</a></div>
                <div class="cib-s2"><a class="tm">"SessionStartTime"</a><a>"City"</a><a class="type">"Type"</a></div>
                <div class="cib-s3"><a class="tm">"SessionStartTime"</a><a>"City"</a><a class="type">"Type"</a></div>
             </div>
            </div>
        </div>
    </div>
    <div class="cib-label-am">
        <div type="text" class="event" name="dc_input2" id="dc_input2"><a class="cib-date">"EventStartDate(24/11/2008)"</a><br>
            <div class="cib-event"><a class="typeevent">"EventType"</a><a class="nevent">▶"Event"</a><br>
                  <div class="cib-s1"><a class="tm">"SessionStartTime"</a><a>"City"</a><a class="type">"Type"</a></div>
                  <div class="cib-s2"><a class="tm">"SessionStartTime"</a><a>"City"</a><a class="type">"Type"</a> </div>
                </div>
            </div>
        </div>
    </div>

[рони]

re.void,
а можно как-то в рамках html, js изобразить исходные данные и необходимый результат.

[re.void]

добавил разметку. а с исходными данными сложнее. У меня данные из таблички.


которые я построчно собираю циклом, пока строчки не кончатся, у меня их тридцать в данном случае.

var count = recordSet.length;
var DateArr = new Array();
var DateEventArr = new Array();


for (var i = 0; i < recordSet.length; i++) {
    var scObj = {
        EventStartDate: recordSet[i]["Event Start Date"],
        EventType: recordSet[i]["Event Type"],
        Event: recordSet[i]["Event"],
        SessionStartTime: recordSet[i]["SBLN Start Time"],
        City: recordSet[i]["SBLN City Name"],
        Type: recordSet[i]["Format"],

        RowCount: i

    };

[рони]

re.void,
ок, но увы не осилил ... слишком много информации, но не той что необходима.

[re.void]

рони,
Постарался переработать вопрос. Я еще очень тугой в этом деле, но хочу прийти к успеху! Не суди строго)

[рони]

re.void,
так ?

{
    "17/10/2008": {
        "Restricted": {
            "My Forum": {
                "18:00": {
                    "City": "Ryazan",
                    "Type": "1on1",
                    "RowCount": 0
                },
                "15:10": {
                    "City": "London",
                    "Type": "3on1",
                    "RowCount": 1
                }
            }
        }
    },
    "24/11/2008": {
        "Conference": {
            "AAA Test Event": {
                "15:10": {
                    "City": "Paris",
                    "Type": "Meeting",
                    "RowCount": 2
                },
                "16:10": {
                    "City": "Moscow",
                    "Type": "Breakfast",
                    "RowCount": 3
                }
            }
        }
    }
}

[re.void]

рони,
Да, именно так!

[рони]

re.void, вариант для медитации ... далее сами

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</script>
  <script>
 $(function(){

var data = [
        {
        "EventStartDate": "17/10/2008",
        "EventType": "Restricted",
        "Event": "My Forum",
        "SessionStartTime": "18:00",
        "City": "Ryazan",
        "Type": "1on1",
        "RowCount": 0
        },
        {
        "EventStartDate": "17/10/2008",
        "EventType": "Restricted",
        "Event": "My Forum",
        "SessionStartTime": "15:10",
        "City": "London",
        "Type": "3on1",
        "RowCount": 1
        },
        {
        "EventStartDate": "24/11/2008",
        "EventType": "Conference",
        "Event": "AAA Test Event",
        "SessionStartTime": "15:10",
        "City": "Paris",
        "Type": "Meeting",
        "RowCount": 2
        },
        {
        "EventStartDate": "24/11/2008",
        "EventType": "Conference",
        "Event": "AAA Test Event",
        "SessionStartTime": "16:10",
        "City": "Moscow",
        "Type": "Breakfast",
        "RowCount": 3
        }
      ]
var obj = {el: $(".cib-day-elem")};
data.forEach(function(c) {
    var a = obj;
    Object.keys(c).forEach(function(d, e) {
        var b = c[d];
        var li = $("<li/>", {text : b});
        var ul = $("<ul/>");
        4 > e ? (!a[b] && (li.appendTo(a.el), ul.appendTo(li), a[b] = {el : ul}), a = a[b]) : li.appendTo(a.el)
    })
});
   })
  </script>
</head>

<body>
<ul class="cib-day-elem"></ul>

</body>
</html>

[re.void]

рони,
Спасибо! Решение проще чем мне виделось! Теперь осталось понять как объекты перенести на html разметку.)