How to Iterate Over Multiple Arrays Simultaneously in Go Templates?

Go Templates: Iterating Over Multiple Arrays Simultaneously

While working on a project, you may encounter the need to iterate over multiple arrays simultaneously in Go templates. This situation arises when you have data structures like the ones below and require each element from these arrays to be grouped together in an output.

type Schedule struct {
    Description   string
    ControlNights int
    PlayNights    int
    StartDay      int
    Combos        []Combo
}

type Combo struct {
    From    time.Time
    Every   int
    Until   time.Time
    Sounds  []string
    Volumes []int
    Waits   []int
}

Iterating Over Combos

To display the data of each combo individually, you can use a range loop iterating over the Schedule.Combos array. This will iterate through each combo. However, this is insufficient for displaying the data you require.

Combining Arrays into Rows

To group data from different arrays into rows, where each row contains data from Sounds, Volumes, and Waits arrays, you can utilize dynamic templates. This technique allows you to manipulate and modify data within the template itself.

Dynamic Templates for Grouping

Consider the following template:

{{ range .Schedule.Combos }}
<div class="container">
    <div class="row">
        <div class="col">
            <div class="card mt-2 ml-2">
                <div class="card-body">
                    <h5 id="strong-Timing-strong"><strong>Timing</strong></h5>
                    <h5 id="Play-every-Every-mins">Play every {{.Every}} mins</h5>
                    <h5 id="From-time-TimeOfDayToString-From">From time {{TimeOfDayToString .From}}</h5>
                    <h5 id="Until-TimeOfDayToString-Until">Until {{TimeOfDayToString .Until}}</h5>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card mt-2">
                <div class="card-body">
                    <h5 id="strong-Sounds-strong"><strong>Sounds</strong></h5>
                    {{ range .Sounds }}
                    <h5 id="Sound">Sound {{.}}</h5>
                    {{ end }}
                </div>
            </div>
        </div>
<p>To group Sounds, Volumes, and Waits together, you can create a new template variable that combines all three arrays.</p>
<pre class="brush:php;toolbar:false">{{ $mergedArrays := .Sounds, .Volumes, .Waits }}

Iterating Over Combined Arrays

With the combined arrays available, you can iterate over them using a nested loop:

{{ range $index, $mergedArray := $mergedArrays }}
    {{ $sound := $mergedArray[0] }}
    {{ $volume := $mergedArray[1] }}
    {{ $wait := $mergedArray[2] }}
    

{{ $sound }} - {{ $volume }} - {{ $wait }}

{{ end }}

In this nested loop, you access the individual elements of the combined array and display them appropriately.

This approach allows you to group the data from Sounds, Volumes, and Waits arrays into the desired rows.