Referencing Go array in Javascript

go, go-templates, html, javascript

Solution

You need to understand something:

Template actions such as `{{index .Array 0}}` are executed at server side in your Go application.

Javascript code is interpreted and run at client side in the browser.

The template parameter value used in template actions (`Array` in your example) does not exist at client side (e.g. as a Javascript object). And Javascript code is not run by the template engine. So the template parameter (value) and Javascript (execution) live in 2 different "spaces".

Having said that, it is not possible to mix template actions/variables and Javascript execution.

You have 2 options:

1) Do what you want to do with template actions.

2) Use the template to create Javascript code which when executed at the client side will construct/recreate the array as a Javascript object so it will be available for further Javascript processing.

Note that if you just want to loop over the array once, creating a Javascript array is not neccessary, you can simply render the JavaScript code that would be the loop body inside a `{{range}}` template action. See Simon's answer as an example to this.

Elaborating #1

You can use the `{{range .Array}}` action to loop over `Array`, and the block is executed for each element, pipeline set to the array element so you can output the array elements like this:

{{range .Array}}
    {{.}}
{{end}}

Of course you can put anything else inside the block, not just the array elements. You can even access the current index like this:

{{range $idx, $value := .Array}}
    Index = {{$idx}}; Element = {{$value}}<br>
{{end}}

Elaborating #2

Let's say your `Array` contains `int` numbers, you can recreate it in Javascript and loop over it in Javascript with a template like this:

<script>
    var arr = [
        {{range .Array}}
            {{.}},
        {{end}}
    ];

    // Now you have a javascript array: arr, loop over it to do something:
    html = "";
    for(var i = 0; i < arr.length; i++) {
        html += " " + arr[i];
    }
</script>

Or since the template engine supports "rendering" arrays and slices as JavaScript arrays, you can simply write:

<script>
    var arr = {{.Array}};

    // Now you have a javascript array: arr, loop over it to do something:
    html = "";
    for(var i = 0; i < arr.length; i++) {
        html += " " + arr[i];
    }
</script>

Problem

I have a Golang array I'm passing to my html file on the front end. I know that ``` '{{ index .Array 0}}' ``` works and pulls the first element from the array. But I want to do a Javascript for-loop and print every element in the array like so ``` <script type="text/javascript"> function loop() { html = "" for(var i = 0; i<5; i++) { html += "{{ index .Array " + i + "}}"; } } ``` But this doesn't work. Something about separating the go array index string, HTML/Javascript doesn't like it and it won't load. It's a syntactical error that I just can't pin down. Any ideas?

Original source