0

I am trying to use handlebars.compile() to generate my HTML unordered list items in my getJSON() callback function:

function addMarker(place)
{

    ...

    // add event listener to open info window when marker is clicked
    marker.addListener('click', function() {
        parameters = {
        geo: place.postal_code
        };
        content = "<div> <ul>";

        // retrieve articles to display in info window via a GET request to /articles
        $.getJSON("/articles", parameters, function(data, textStatus, jqXHR) {
            for (i = 0; i < data.length; i++) {
                content += Handlebars.compile("<li><a href={{data[i].link}}>{{data[i].title}}</li>")
            }
            content += "</ul> </div>";
        });
        showInfo(marker, content);
    });

   ...

}

getJSON() is returning a list of article objects that matches the staff solutions /articles output, but my info window window is empty when I click on a marker. The value of content after the getJSON() callback function runs is this:

<div> <ul>function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}function e(a,b){return f||(f=d()),f.call(this,a,b)}</ul> </div>

How am I misusing handlebars.compile() to cause this?

0

The problem was that I didn't understand exactly what handlebars was doing. I didn't need a template, as I already had the variables defined as needed in the JSON response. All I needed here was string interpolation:

`${data[i].link}`

This Stack Overflow answer clarified things for me.

| improve this answer | |

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .