How to Iterate Over Parallel Arrays in HTML Templates Using index

This article addresses the difficulty of iterating through parallel arrays (of equal size) in HTML templates. Specifically, how to utilize the index function within the range block to achieve this.

The index function is a predefined global template function that retrieves an item from a map, slice, or array based on the provided index. This function allows complex navigation within data structures within templates.

In the context of iterating through parallel arrays, we need to be mindful of the context in which the index function is used. By default, the dot (${}) within the range block refers to the current element in the array being iterated. However, to access data from the other array, we need to revert to the original dot, which represents the passed data argument to the Execute function.

The solution, therefore, is to use the original dot ($) instead of dot in the index expression:

{{range $i, $e := .First}}{{$e}} - {{index $.Second $i}}{{end}}

This adjustment ensures that the index function references the original data argument, allowing parallel iteration over the arrays.

Another approach to tackling this issue is to define a custom template function called zip, which accepts multiple slices as input and returns a slice of pairs of values. such a function would simplify the template code and perhaps be reused in other contexts.