Accessing data in handlebars.js template

Question

I have the following JSON data set and would like to iterate across the users and render a link for each of the apps they can access. I have successfully iterated across the array of users and rendered the name of each app(s) from the array of apps contained by each user. However, I don't know how to lookup the apps url from the apps array. Is this possible to do within a Handlebars.js template?

    { "config": {
        "users":
        [
            {
                "name": "Bob Jones",
                "title": "Developer",
                "apps": ["app1","app2","app4"]           
            },
            {
                "name": "Brad Willis",
                "title": "Manager",
                "apps": ["app2","app4"]       
            }
        ],
        "apps":
        [
            {
                "name": "app1",
                "url": "http://host/app1"
            },
            {
                "name": "app1",
                "url": "http://host/app1"
            },
            {
                "name": "app1",
                "url": "http://host/app1"
            },
            {
                "name": "app1",
                "url": "http://host/app1"
            }
        ] 
    }
}

Here is the template I am currently using to display the users and apps:

{{#each config.users}}
    <div class="user-panel">
        <div class="user-panel-name">{{this.name}}</div>
        <div class="user-panel-title">{{this.title}}</div>
        <div class="user-panel-apps">                          
            {{#each this.apps}}
                <a class="btn btn-success btn-sm" onclick="DoLogin('APP URL GOES HERE');">{{this.name}}</a>
            {{/each}}
        </div>                       
    </div>
{{/each}}

Answer 1

  {{#each this.apps}} <a class="btn btn-success btn-sm" onclick="DoLogin('{{this.url}}');">{{this.name}}</a> {{/each}} 

Answer 2

Register a helper to get the url of specific app.

template:

{{#each config.users}}
    <div class="user-panel">
        <div class="user-panel-name">{{this.name}}</div>
        <div class="user-panel-title">{{this.title}}</div>
        <div class="user-panel-apps">
            {{#each this.apps}}
            <a class="btn btn-success btn-sm" onclick="DoLogin('{{url this}}');">{{this}}</a>
                                                                  ^^^^^^^^
            {{/each}}
        </div>
    </div>
{{/each}}

script:

    var val = {
        "config": {
            "users": [
                {
                    "name": "Bob Jones",
                    "title": "Developer",
                    "apps": ["app1", "app2", "app4"]
                },
                {
                    "name": "Brad Willis",
                    "title": "Manager",
                    "apps": ["app2", "app4"]
                }
            ],
            "apps": [
                {
                    "name": "app1",
                    "url": "http://host/app1"
                },
                {
                    "name": "app1",
                    "url": "http://host/app1"
                },
                {
                    "name": "app1",
                    "url": "http://host/app1"
                },
                {
                    "name": "app1",
                    "url": "http://host/app1"
                }
            ]
        }
    };
    Handlebars.registerHelper('url', function (app) {
        for (var i = 0, len = val.config.apps.length; i < len; i++) {
            if (app == val.config.apps[i].name) {
                return val.config.apps[i].url;
            }
        }
    });