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!

What happens if you use `var html = template({data: data});`? — Mjh, Apr 04 '16 at 10:23
I take it that it was working, but you didn't add the HTML to desired element. — Mjh, Apr 04 '16 at 12:15

score 1 · Accepted Answer · answered Apr 04 '16 at 10:59

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);

answered Apr 04 '16 at 10:59

Anbarasan

1,057
11
17

Aaaah what a bad mistake! – vovina Apr 04 '16 at 11:12

score 1 · Answer 2 · edited May 23 '17 at 11:59

~~The tricky side of this is converting the data to match what Handlebars can interpret correctly. You need to be able to convert objects to arrays reliably (source below).~~

Handlebars supports looping through objects so ignore my array conversion. Source: Handlebars/Mustache - Is there a built in way to loop through the properties of an object?

Inside your Handlebars template, you may need to slightly tweak it to something along these lines: -

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

Then, to access this in Handlebars as you would like, your template should be called upon like this: -

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

Note this is not required to solve this issue -- needed for old, legacy Handlebars only where it may be a challenge to iterate objects. Here is a starting point for converting objects to arrays: -

var arr = Object.keys(obj).map(function(k) { return obj[k] });

To convert objects to arrays, here's some useful links: -

How to map this Json to work with Handlebars js?

2 Answers2