How can I iterate over parallel arrays in HTML templates using range and the index function?

Utilizing index within range Loops to Iterate over Parallel Arrays in HTML Templates

In HTML templates, the range function allows for the iteration over arrays or slices, enabling the listing of individual elements within a structure. When working with multiple parallel arrays, it is often necessary to iterate through them simultaneously, mapping elements from each array.

However, the following approach does not function as expected:

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

This fails because the dot (.) within the range block refers to the current element being iterated over, which is the second array. The correct approach involves accessing the original dot value, which represents the entire data structure being passed to the template.

The index function, a predefined template function, enables indexing operations on maps, slices, and arrays. Using it, the correct approach is as follows:

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

This variation uses the dot references correctly. The $ in front of Second represents the original dot value, enabling the indexing of the second array using the current index.

However, a more concise solution would be to create a custom template function named zip that accepts multiple slices and returns a slice of tuples containing elements from each input slice. This approach provides a cleaner template and facilitates reuse:

{{range zip .First .Second}}
  {{$a := $._1}}
  {{$b := $._2}}
  {{printf "%v - %v" $a $b}}
{{end}}

The above is the detailed content of How can I iterate over parallel arrays in HTML templates using range and the index function?. For more information, please follow other related articles on the PHP Chinese website!