Populate dropdown options using Thymeleaf in a const form

Asked by s
23 days ago.

I’m using the Javascript event scheduler to schedule lessons, and each instructor is assigned to a certain group of students. In the prompt window (const form) after selecting an event, I have a drop-down menu. Is there a way I can use Thymeleaf to have a foreach student that creates an option for each student?

Here is the code for the form that is inside the Javascript script

const form = [
  { name: "Text", id: "text" },
  {
    name: "Student",
    id: "student",
    type: "select",
    options: [
      {
        name: "option1",
        id: "option1id", // this is a hard-coded option
      },
      {
        // is there a way to dynamically populate the options? this code does not work syntactically
        name: [[th: each="student : ${students}" th: value = "${student.name}"]],
        id: th: each="student : ${students}" th: value = "${student.sid}",
      },
    ],
  },
];

how-to javascript

Answer posted by Dan Letecky [DayPilot]
22 days ago.

Thymeleaf can’t be used this way.

I recommend loading the server-generated data using a special HTTP call. It could look like this:

const {data} = await DayPilot.Http.get(`/get/my/options`);
const form = [
  { name: "Text", id: "text" },
  {
    name: "Student",
    id: "student",
    type: "select",
    options: [
      {
        name: "option1",
        id: "option1id", // this is a hard-coded option
      },
      ...data,
    ],
  },
];

This assumes the /get/my/options endpoint returns a JSON array with the required data.

Populate dropdown options using Thymeleaf in a const form

Products

Learn

Get Support

DayPilot Pro