Pass in array to JavaScript function using Mustache variable tag

Question

I'm using Node.js Express with Hogan templates, which I believe uses Mustache variable tags. I have a JavaScript array that I'm trying to pass into a JavaScript function that is part of my hogan template. Here is an example of what I am trying to do:

https://jsfiddle.net/z1ga8wgw/

If you check the JavaScript console and click on the error in there, you will notice that the template expanded into this, which gives an error:

function test([object Object],[object Object],[object Object]) {
    console.log('test');
}

The error I get in my actual application is:

Uncaught SyntaxError: Unexpected identifier

The error from JSFiddle gives is this:

Uncaught SyntaxError: Unexpected identifier
    at DOMEval (jquery-git.js:82)
    at domManip (jquery-git.js:5782)
    at jQuery.fn.init.append (jquery-git.js:5918)
    at HTMLDocument.<anonymous> ((index):61)
    at mightThrow (jquery-git.js:3569)
    at process (jquery-git.js:3637)

I would like to be able to have one array as the argument, but as you can see, the amount of arguments can vary. I would settle for this type of behavior as well if there isn't an error because I believe you can use the arguments variable, but just one parameter would be best, if that's possible.

Edit

Here is the test code from the JSFiddle (which also has Mustache and JQuery as resources that I'm not listing here):

HTML

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

<script type="text/html" id="test">
    <script>
    function test({{data}}) {
        console.log('test');
    }
    </script>
</script>

JavaScript:

// Got help with this template from: http://jsfiddle.net/evildonald/hqAnK/
$(document).ready(function () {
    var output = $("#output");    
    var template = $("#test").html();

    var data = { data : [
        {value : "1", text : "text 1"},
        {value : "2", text : "text 2"},
        {value : "3", text : "text 3"}
    ]};

    html = Mustache.render(template, data);
    output.append(html);
});

Freez · Accepted Answer · 2016-12-20 06:55:56Z

2

Mustach behaves correctly, what you are trying to do is not possible.

You are writting a function declaration, parameters must be variable names, not string representation of an array.

[
  {value : "1", text : "text 1"},
  {value : "2", text : "text 2"},
  {value : "3", text : "text 3"}
].toString()

// => [object Object],[object Object],[object Object]

If you want to retrieve your array inside your template, you have to serialize it using JSON.stringify.

Javascript

var data = { 
  data : JSON.stringify(
    [
      {value : "1", text : "text 1"},
      {value : "2", text : "text 2"},
      {value : "3", text : "text 3"}
    ]
  )
};

HTML

<script type="text/html" id="test">
  <script>
    function test(data) {
      console.log('test', data);
    }

    // call your function with data as parameter
    test( {{{data}}} );
    //    ^^^    ^^^ Use {{{}}} syntax to not escape quotes into html entities
  </script>
</script>

https://jsfiddle.net/z1ga8wgw/1/

answered Dec 20, 2016 at 6:55

Freez

7,6783 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Programmer_D Over a year ago

Interesting. I tried using JSON.stringify but didn't know to use three "{" and "}" when using the array as a param to the function.

Collectives™ on Stack Overflow

Pass in array to JavaScript function using Mustache variable tag

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related