Jqxtree sidebar from json

Question

I'm trying to build a sidebar nav menu using jqwidgets, but cant seem to figure out how to populate it, as i'm a javascript noob.

I've the following json data structure:

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

I want to be able to build (I think with markup?) the tree structure from image name (taken from panorama field above). Something like:

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

I'm trying to use getjson and i can pull the data correctly. Nevertheles, i'm not able to create the necessary structure needed to populate jqxtree.

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

I can parse the dates using this function i found somewhere on the 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; }

But cant seem to be able to create nested objects arrays (?). The markup I think would be something like:

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

Cheers