How to map this Json to work with Handlebars js?

Question

I have a Json with this structure:

        var data = {
            "h": {
                "results": {
                    "0": {
                        "title": "Do feral cats affect small animals?",
                        "authors": " Billie Theresa Lazenby, Billie Theresa Lazenby",
                        "url": "#",
                        "published": 2012,
                        "summary": ""
                    }
                },
                "categoryTitle": "Sydney eScholarship",

            },
            "j": {
                "results": {
                    "0": {
                        "title": "Utagawa Kunisada II",
                        "description": "You can learn more ...",
                        "url": "#",
                        "thumb": "#",
                        "published": 2010
                    },
                   "1": {
                        "title": "Utagawa Kunisada II2",
                        "description": "You can learn more ...",
                        "url": "#",
                        "thumb": "#",
                        "published": 2012
                    }
                },
                "categoryTitle": "YouTube",

            }
        }

and the js is as follow:

        var source = $("#entry-template").html();
        var template = Handlebars.compile(source);
        var html = template(data);
        $('#Content').html(html);

I need to get access to data.h.categoryTitle and data.j.categoryTitle as first iteration then data.h.results.Title and data.j.results[0].Title and data.j.results[1].Title as nested iteration, this is my template:

    <div id="content"> </div>
<script id="entry-template" type="text/x-handlebars-template">

    {{#each data}}
    <div class="searchResultItem  col-sm-9 col-xs-12">
        {{#each results}}
        <a href="#" class="title">{{this.title}}</a>
        {{/each}}
        <span>{{this.categoryTitle}}</span>
    </div>
    {{/each}}
</script>

Its not showing anything :-| how can I do this with Handlebars?

Many Thanks!

Answer 1

you have mistyped the id in the wrong case, the letter "C" is typed in caps in the script whereas it is typed in small in the html. so it is not able to find the element to render the generated html. that is why nothing is appearing.

change the lines

var html = template(data);
$('#Content').html(html);

to

var html = template({data: data});
$('#content').html(html);