How to retrieve data from Object using each loop by adding key value?

Question

I have a url path, from the url I am getting base and sub url details. Using all this urls I would like to load the controllers to web site.

I have the ValidPath object separately. I am trying like this:

var ValidPaths = {
        "green":{
            "url":"greenController.js",
            "lightgreen" :{
                "url":"lightGreenController.js",
                "floragreen":{
                    "url":"floragreenController.js"
                }
            }
        }
    }
var path = ["green"].concat("lightgreen/floragreen".split('/'));
var finArr = [];

_.each(path, function(str,key){
    label += '["'+str+'"]';
    console.log(ValidPaths+label['url']); // i am not getting proper console details.
})

But I am getting wrong out put. I am looking for my finArr should be like this:

//should be [ {"label":"green","url":"greenController.js"}, {"label":"lightgreen","url":"lightGreenController.js"},{"label":"floragreen","url":"floragreenController.js"}]

So I can iterate through temp engine. any one tell me what is the mistake i made here?

Demo Here

Answer 1

Thanks to user3558931,

 var paths = [path].concat(subPath.split('/')),
                    arr = [],prePath=ValidPaths;

                 function pathFinder (path,i){
                    if(prePath[path]){
                        arr.push({"label":path,"url":prePath[path]['url']});
                        prePath = prePath[path];
                    } else{
                        console.log("there is no path like " + path + "in ValidPaths");
                    }
                    return arr;
                }

                _.map(paths, function(root,i){
                    return pathFinder(root,i);
                });

                console.log("breadCrumb", arr);

Answer 2

$(function() {
   var ValidPaths = {
        "green":{
            "url":"greenController.js",
            "lightgreen" :{
                "url":"lightGreenController.js",
                "floragreen":{
                    "url":"floragreenController.js"
                }
            }
        }
    },
    finArr = [],
       getNode = function(color, obj ) {
           var oPath = {}, i = 0;
           oPath.label = color;
           for( clr in obj ) {
               if( i === 0 ) {
                   oPath.url = obj[ clr ];
                   finArr.push( oPath );
               } else if( i === 1 ) {
                   getNode( clr, obj[ clr ] );
               }
               i++;
           }
       };
    for( clr in ValidPaths) {
        getNode( clr, ValidPaths[clr] );
    }
    console.log( finArr ); 
});

JSFiddle Demo

This version is the shortest I could get it to. Any shorter and I encountered 'Uncaught RangeError: Maximum call stack size exceeded' error