Nested ranges in Golang template

Question

I am pretty much new with this, so I need a little bit of help.

I have two structs like this:

type School struct {
    ID          string
    Name        string
    Students    []Student
}

type Student struct {
    ID          string
    Name        string
}

What I need to do is when I select one School object from first select element, that second select element displays only Students from selected School. Array of object School displays all data correctly.

 <div> <select name="school"> {{range .Schools}} <option value="{{.ID}}">{{.Name}}</option> {{end}} </select> </div> <div> <select name="student"> {{range .Students}} <option value="{{.ID}"> {{.Name}}</option> </select> {{end}} </div> 

I need to range in second select something like selectedSchoolObject.Students.

Thanks in advance!

Answer 1

The Go template is executed and rendered at server side , in / by your Go app.

When you select something in the School drop-down list, that happens at client side , in the browser.

The browser cannot execute Go templates. So basically you have 2 options:

1) When the user changes selection of the Schools drop-down, re-render the page. This involves sending a new HTTP request, you may provide the ID of the selected Scool in a URL parameter for example, and the Go template may render only the Students of the selected school in the 2nd drop-down list.

2) You may implement this at client side, using JavaScript code. For this, you would need to include all students of all schools in the rendered HTML page, eg in JavaScript arrays, and use JavaScript code to change the content of the Students drop-down list.

Read related questions:

Referencing Go array in Javascript

Interactive web pages in Go

Dynamically refresh a part of the template when a variable is updated golang

Creating load more button in Golang with templates

Answer 2

I have solved this using Javascript on client side.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" >
    $(document).ready(function() {
        var school = {};
        var schoolsArray = [];
        {{range .Schools}}
            school.ID = {{.ID}};
            school.Name = {{.Name}};
            school.Students = {{.Students}};
            schoolsArray.push(school);
        {{end}}

        $("#school").change(function() {
            var parent = $(this).val();
            Object.keys(schoolsArray).forEach(function (key) {
                if (schoolsArray[key]['ID'] === parent) {
                    var students = schoolsArray[key]['Students'];
                    listStudents(students);
                }
            });
        });
        function listStudents(students) {
            Object.keys(students).forEach(function (key) {
                $('#student').append($('<option>', {
                    value: students[key]['ID'],
                    text : students[key]['Name']
                }));
            });
        } </script>

And this is my HTML code:

<div>
  <select name="school" id="school">
      {{range .Schools}}
          <option value="{{.ID}}">{{.Name}}</option>
      {{end}}
  </select>
</div>   <div>
  <select name="student" id="student">
       </select>
</div>

Hope this will be helpful for someone else as well. Also, any suggestions for improving this code is welcome.