How to add an object and then another object as an attribute to the first object in a Thymeleaf template?

Hi, Florian Tönjes

I think there is some problem with this select thing.

If the Item can be selected, that means we should have list of Items somewhere in database to put into this select.

That also means that we should make something like this:

    @Autowired
    private itemsService itemsService; // with all DAOs and all other stuff

    @RequestMapping("/add")
    public String recipeForm(Model model) {
        model.addAttribute("recipe", new Recipe());
        model.addAttribute("ingredients", ingredientService.findAll());
        model.addAttribute("categories", Category.values());

        model.addAttribute("items", itemsService.findAll());
        return "edit";
    }

    // same thing for edit
    @RequestMapping("/recipe/{id}/edit")
    public String editForm(@PathVariable Long id, HttpServletRequest request, Model model) {
        Recipe recipe = recipeService.findById(id);
        model.addAttribute("recipe", recipe);
        model.addAttribute("categories", Category.values());

        model.addAttribute("items", itemsService.findAll());
        return "edit";
    }

In this case Thymeleaf can be easily changed to this one:

                      <select th:field="*{ingredients[__${ingredientStat.index}__].name}">
                        <option
                                th:each="item : ${items}"
                                th:value="${item.id}"
                                th:text="${item.name}"
                        >
                        </option>
                      </select>

Of course item.id and item.name will depend on your implementation.

If you want to test whether this works, push artificial array with Strings to edit method in Controller:

    // same thing for edit
    @RequestMapping("/recipe/{id}/edit")
    public String editForm(@PathVariable Long id, HttpServletRequest request, Model model) {
        Recipe recipe = recipeService.findById(id);
        model.addAttribute("recipe", recipe);
        model.addAttribute("categories", Category.values());

        // mocking items as list of strings
        List<String> items = new ArrayList<String>;
        items.add("item 1");
        model.addAttribute("items", items);
        return "edit";
    }

and then in Thymeleaf template you can push

                      <select th:field="*{ingredients[__${ingredientStat.index}__].name}">
                        <option
                                th:each="item : ${items}"
                                th:value="${item}"
                                th:text="${item}"
                        >
                        </option>
                      </select>

I tried that : it has worked.

You probably ask me: how I will go

I will probably make Item as separate Class, because it is a good thing to have common ingredients for all recipes. May be Items can be specific for user or may be common to everyone.

Again I don't know what they have meant. I will definitely ask them but on Monday. Craig and Chris they don't reply much on weekend. But I will tell you they usually say : go harder way. So probably they have meant that items can be shared across recipes...

But you can proceed now. I hope I made myself clear. Let me know if that worked for you.

Regarding your code ...

As you see select works like this in Thymeleaf: you put in <select> tag field that you want to fill: in this case :

<select th:field = "*{ingredients[__${ingredientStat,index}__].name}">

Again select is used for name only, quantity and Condition are input fields and I posted how to fill them.

What you are doing is to try to select Ingredient ... which is not right I think.

I think we do not select Ingredient. We select Item which is ingredient.name, we input condition and quantity and that is how the whole object is send to Controller, does it make sense ?

I'm posting again my whole part related to ingredient:

           <div th:each="ingredient : *{ingredients}" class="ingredient-row">
                <div class="prefix-20 grid-30">
                    <input hidden th:field="*{ingredients[__${ingredientStat.index}__].id}"/>
                    <input hidden th:field="*{ingredients[__${ingredientStat.index}__].version}"/>
                    <p>
                      <select th:field="*{ingredients[__${ingredientStat.index}__].name}">
                        <option
                                th:each="item : ${items}"
                                th:value="${item}"
                                th:text="${item}"
                        >
                        </option>
                      </select>
                        <!--<input th:field="*{ingredients[__${ingredientStat.index}__].name}"/>-->
                    </p>
                </div>
                <div class="grid-30">
                    <p>
                        <input th:field="*{ingredients[__${ingredientStat.index}__].condition}"/> </input>
                    </p>
                </div>
                <div class="grid-10 suffix-10">
                    <p>
                        <input th:field="*{ingredients[__${ingredientStat.index}__].quantity}"/> </input>
                    </p>
                </div>
            </div>

• So we have big div with th:each looping through ingredient.
• Inside each ingredient we assign everything easily, except ingredient.name field
• Ingredient.name is assigned through select using external items array, that is sent to our model
• in <select> we specify field that we are filling, in <option> we list through items not related to ingredient, and post value as item.name or can be item.id depends on the implementation

P.S. The most important thing I wanted to add, that this project is freelance...

Considering you don't have actual Product owner, that gives you actual orders of what he wants, and don't have access to Slack, and they also are not that strict in requirements, you can solve problems in your own way.

If you feel that this select too much, leave Ingredient for now with all <input text> fields. It is first step towards better solution.

The most important thing is to go always further.

You can save unknown thing for TODO and then figure out the problem later.

Believe me I have ton of unaswered problems that I don't have answers to, and probably no one will.

Important thing is to do something little by little, save TODO problems for later, and then if possible come back and resolve them.

And I'm not quite sure what do you mean by

how do I grab an ingredient out of this? The ingredientStat.index stuff only work when it is within a th:each, right? But the only th:each is at the option field like this:

This you have to explain me more, if you feel my solution does not fit.

May be I haven't understood the tasks properly...