Handlebars 3 level iteration

by Csaba Hellinger

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script id="template" type="text/x-handlebars-template">
    <ul>
        {{#categories}} 
        <li>{{category}} 
            <ul>
                {{#subcategories}} 
                <li>{{subcategory}} 
                    <ul>
                        {{#items}} 
                        <li>{{name}} ({{description}})</li>
                        {{/items}} 
                    </ul>
                </li>
                {{/subcategories}} 
            </ul>
        </li>
        {{/categories}} 
    </ul>
</script>

<div id="output">
</div>

JavaScript

var data = {  
        "categories": [
            {
                "category": "Game",
                "subcategories": [
                    {
                        "subcategory": "Action",
                        "items": [
                            {
                                "name": "Game 1",
                                "description": "Game 1 Description"
                            },
                            {
                                "name": "Game 2",
                                "description": "Game 2 Description"
                            }
                        ]
                    }
                ]
            },
            {
                "category": "Movie",
                "subcategories": [
                    {
                        "subcategory": "Fantasy",
                        "items": [
                            {
                                "name": "Fantasy Film 1",
                                "description": "Fantasy Film 1 Description"
                            },
                            {
                                "name": "Fantasy Film 2",
                                "description": "Fantasy Film 2 Description"
                            }
                        ]
                    },
                    {
                        "subcategory": "Horror",
                        "items": [
                            {
                                "name": "Horror Film 1",
                                "description": "Horror Film 1 Description"
                            }
                        ]
                    }                
                ]
            }
        ]
    };

var template = Handlebars.compile($("#template").html());
$('#output').append(template(data));