Jqxtree боковая панель от JSON

Question

Я пытаюсь создать навигационное меню боковой панели, используя jqwidgets, но, похоже, не могу понять, как его заполнить, так как я являюсь нубом из javascript.

У меня есть следующая структура данных JSON:

{
"scenes": {
"Imagem1":  {
                "title":  "Imagem1",
                "hfov":  120,
                "pitch":  -12,
                "yaw":  180,
                "type":  "equirectangular",
                "panorama":  "http://my.ip.address/images/20170114-152411.jpg",
                "hotSpotDebug":  true,
                "autoLoad":  true,
                "autoRotate":  2,
                "hotSpots":  [
                                 {
                                     "pitch":  -5,
                                     "yaw":  -125,
                                     "type":  "scene",
                                     "text":  "Imagem2",
                                     "sceneId":  "Imagem2"
                                 }
                             ]
            },}

Я хочу иметь возможность построить (я думаю, с разметкой?) Древовидную структуру из имени изображения (взято из поля панорамы выше). Что-то вроде:

2017--->January--->Saturday 14--->Title

Я пытаюсь использовать getjson, и я могу получить данные правильно. Тем не менее, я не могу создать необходимую структуру, необходимую для заполнения jqxtree.

$.getJSON('/my.json',{},function(data) {
for (item in data) {
  for (subItem in data[item]) {
    var mbase = data[item][subItem];
     console.log(mbase.panorama);
  }
}});

Я могу разобрать даты, используя эту функцию, которую я нашел где-то на WWW.

 function parse (str) {
    // validate year as 4 digits, month as 01-12, and day as 01-31 
    if ((str = str.match (/^(\d{4})(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])$/))) {
       // make a date
       str[0] = new Date (+str[1], +str[2] - 1, +str[3]);
       // check if month stayed the same (ie that day number is valid)
       if (str[0].getMonth () === +str[2] - 1)
          return str[0];
    }
    return undefined; }

Но кажется, что я не могу создавать массивы вложенных объектов (?). Я думаю, что разметка будет выглядеть примерно так:

<ul>
<li item-checked='false' item-expanded='false'><a href='http://mtv.me'>2017</a>
    <ul>
        <li  item-expanded='false'>MONTH
        <ul>
            <li  item-expanded='false'>DAY
                <ul>
                    <div id='mphoto' style='display: flex;align-items: center;'>
                        <li>PHOTO</li>
                        <img style='display:float;z-index:0.5;' id='Imagem1' onmouseover="CallModal(Imagem1);" HEIGHT=50 WIDTH=50 src="http://my.ip.address/images/20170108-152411.jpg" >
                    </div>
                    <li>PHOTO</li>
                    <li>PHOTO</li>
                    <li>PHOTO</li>
                    <li>PHOTO</li>
                    <li>PHOTO</li>
                </ul>
            </li>
        </ul></li>
            <li  item-expanded='false'>MONTH
            <ul>
                <li  item-expanded='false'>DAY
                    <ul>
                        <div id='mphoto' style='display: flex;align-items: center;'>
                            <li>PHOTO</li>
                            <img style='display:float;z-index:0.5;' id='Imagem2' onmouseover="CallModal(Imagem2);" HEIGHT=50 WIDTH=50 src="http://my.ip.address/images/20170108-180000.jpg" >
                        </div>
                    </ul>
                </li>
            </ul>
            </li>
    </ul>
</li>

ура