How to return object or json data to html from handlebars helper

Question

This is my handlebar block in html layout:

{{json language}}

This is my handlebar helper in my main build.js:

  handlebars.registerHelper('json', function(language) {
    var data = {
      "marathi" : "m",
      "hindi" : "h",
      "english" : "e"
    }
    return ??
  });

How do I return the "data" to the same html layout above? It can go anywhere in the html. The "language" comes from a yaml frontmatter in markdown file. If possible I want to loop through a specific json depending on the value of "language".

Thanks!

What do you mean by "_return_ the object?" Do you mean you want the variable to be available to script on the page, or do you mean that you want JSON to be printed in the resulting HTML? — andyg0808, Sep 17 '16 at 09:59
check tihs http://zshawnsyed.com/2015/04/30/output-json-in-handlebars/ — Deendayal Garg, Sep 17 '16 at 11:09

score 0 · Answer 1 · answered Sep 17 '16 at 11:19

Here is an example (jsfiddle):

// In your HTML page:
// <script id="my-template" type="text/x-handlebars-template">{{json date}}</script>
// <output></output>

// Define the helper
Handlebars.registerHelper('json', function(context, options) {
  return JSON.stringify(context, null, 2);
});

// Usage
var source = document.querySelector("#my-template").innerHTML;
var template = Handlebars.compile(source);
var html = template({
  title: 'Lorem Ipsum Dolor',
  date: {month: 'January', day: 13, year: 2012}
});

document.querySelector('output').innerHTML += '<pre>'+ html +'</pre>';

It shows the data in "my-template" but nothing shows up in . I put your code in the script. I even put the helper in my node.js build file — xpark, Sep 17 '16 at 11:40

How to return object or json data to html from handlebars helper

1 Answers1