Referencing Go array in Javascript

Question

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?

Nosegay

The code produce a string "{{ index .Array0}}{{ index .Array1}}{{ index .Array2}}{{ index .Array3}}{{ index .Array4}}". There are no space between .Array and numbers. – Glandulous

no sorry- even with the space it doesn't work, i edited it to show that – Nosegay

Answer 1

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>

Cockoftherock

Answer 2

You're not "passing a Golang array to the front end" .. your template is being rendered server side. That is an important distinction.

When you think about it like that .. the syntactic issue becomes clear. You are attempting to intermix Go's template syntax with Javascript right in the middle of expressions. That simply isn't correct. You should use a Go loop that, when rendered, produces valid Javascript for the client to consume:

var javaScriptHtmlVariable = "";

{{ range .Array }}
    javaScriptHtmlVariable += '{{.}}';
{{ end }}

Which would render:

javaScriptHtmlVariable += 'One';
javaScriptHtmlVariable += 'Two';
javaScriptHtmlVariable += 'Three';
javaScriptHtmlVariable += 'Four';
// etc..

Goahead