javascript - How can I create a dynamic list of routes from JSON? -

i have json file containing information tile based navigation app uses router. each tile link directly external application, or contain subtiles displayed when tile clicked. each of these have own subtiles, , on. json delivered odata service app needs dynamically create navigation may change.

how can implement router have url looking #tile1/tile1-1/tile1-1-3 indicate user clicked on first tile, went screen clicked on first tile there, followed screen on clicked third tile? route would, when coming bookmark, load screen subtiles tile1-1-3 node json.

the names 'tile1-1-3' etc visualise position of tile example. in real version names won't indicate position in tree, more #myapps/myapprovalapps.

i have recursive function crawls through every node , generates individual route, i'm unsure how add dynamic pattern {tile}/{subtile}/{subtile} , parent route think needed navigate between levels properly.

i have home.view.xml displays top level tiles, , page1.view.xml rest of levels of subtiles. correct? how can create views dynamically if not?

hopefully goal clear, can elaborate more if needed.

recursive function creates routes:

createroutes: function(adata, orouter){   for(var i=0; i<adata.length; i++){     orouter.addroute({name: adata[i].id,                       pattern: adata[i].title,                       view: "page1"}); //parent?      if(adata[i].subtiles.length > 0){ // has subtiles               this.createroutes(adata[i].subtiles, orouter);     }   } } 

json:

{   "tilescollection" : [     {       "id"     : "tile1",       "title"  : "tile1",       "target" : "#",       "subtiles" : [         {           "id"     : "tile1-1",           "title"  : "tile1--1",           "target" : "#",           "subtiles" : []         }       ]     },     {       "id"     : "tile2",       "title"  : "tile2",       "target" : "#",       "subtiles" : [         {           "id"     : "tile2-1",           "title"  : "tile2--1",           "target" : "#",           "subtiles" : []         },         {           "id"     : "tile2-2",           "title"  : "tile2--2",           "target" : "#",           "subtiles" : []         },         {           "id"     : "tile2-3",           "title"  : "tile2--3",           "target" : "#",           "subtiles" : [             {               "id"     : "tile2-3-1",               "title"  : "tile2--3--1",               "target" : "#",               "subtiles" : []             },             {               "id"     : "tile2-3-2",               "title"  : "tile2--3--2",               "target" : "#",               "subtiles" : []             }           ]         }       ]     },     {       "id"     : "tile3",       "title"  : "tile3",       "target" : "#",       "subtiles" : []     },     {       "id"     : "tile4",       "title"  : "tile4",       "target" : "#",       "subtiles" : [         {           "id"     : "tile4-1",           "title"  : "tile4--1",           "target" : "#",           "subtiles" : []         }       ]     }   ] } 

how this?

createroutes: function(adata, orouter, sparentpattern, iviewlevel) {   iviewlevel = iviewlevel || 0;    (var i=0; i<adata.length; i++) {     var spattern = sparentpattern ? sparentpattern +"/"+ adata[i].title : adata[i].title;      orouter.addroute({       name: adata[i].id,       pattern: spattern,       view: "page1",       viewlevel : iviewlevel     });      if (adata[i].subtiles.length > 0) {               this.createroutes(adata[i].subtiles, orouter, spattern, iviewlevel+1);     }   } } 

in example use pattern build parent-child relationship suggested.