Dropdown menu for editing categories doesn't work

Question

I'm making a simple blog using springframework. I'm trying to make Categories for my posts/articles. When I create articles, I have the option to choose a Category and it works fine. However, when I try to edit an Article, the drop-down menu for choosing a Category is not working. It's just and empty field with a 'down arrow' sidebad and nothing happens when I click on it

//ARTICLE EDIT--------------------------------------------------
@GetMapping("/article/edit/{id}")
@PreAuthorize("isAuthenticated()")
public String edit(@PathVariable Integer id, Model model)
{
    if(!this.articleRepository.exists(id))
    {
        return "redirect:/";
    }
    Article article = this.articleRepository.findOne(id);

    if(!isUserAuthorOrAdmin(article))
    {
        return "redirect:/article/"+id;
    }

    List<Category> categories = this.categoryRepository.findAll();
    String tagString = article.getTags().stream().map(Tag::getName).collect(Collectors.joining(", "));

    model.addAttribute("view", "article/edit");
    model.addAttribute("article", article);
    model.addAttribute("category", categories);
    model.addAttribute("tags", tagString);

    return "base-layout";
}

@PostMapping("/article/edit/{id}")
@PreAuthorize("isAuthenticated()")
public String editProcess(@PathVariable Integer id, ArticleBindingModel articleBindingModel)
{
    if(!this.articleRepository.exists(id))
    {
        return "redirect:/";
    }
    Article article = this.articleRepository.findOne(id);
    Category category = this.categoryRepository.findOne(articleBindingModel.getCategoryId());
    HashSet<Tag> tags = this.findTagsFromString(articleBindingModel.getTagString());

    if(!isUserAuthorOrAdmin(article))
    {
        return "redirect:/article/"+id;
    }

    article.setContent(articleBindingModel.getContent());
    article.setTitle(articleBindingModel.getTitle());
    article.setCategory(category);
    article.setTags(tags);

    this.articleRepository.saveAndFlush(article);

    return "redirect:/article/" + article.getId();
}

The html file is:

<main>
    <div class="container body-content span=8 offset=2">
        <div class="well">
            <form class="form-horizontal" th:action="@{/article/edit/{id}(id=${article.id})}" method="POST">
                <fieldset>
                    <legend>Edit Post</legend>

                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="article_title">Post Title</label>
                        <div class="col-sm-4 ">
                            <input type="text" class="form-control" id="article_title" placeholder="Post Title" name="title" th:value="${article.title}"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="article_content">Content</label>
                    <div class="col-sm-6">
                        <textarea class="form-control" rows="6" id="article_content" name="content" th:field="${article.content}"></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-4 control-label" for="article_tags">Tags</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="article_tags" placeholder="Tags" name="tagString" th:value="${tags}"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-4 control-label" for="article_category">Category</label>
                    <div class="col-sm-6">
                        <select class="form-control" id="article_category" name="categoryId">
                            <option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.name}"  th:selected="${category.id == article.category.id}">
                            </option>
                        </select>
                    </div>
                 </div>

                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-4">
                        <a class="btn btn-default" th:href="@{/article/{id}(id = ${article.id})}">Cancel</a>
                        <input type="submit" class="btn btn-success" value="Edit"/>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>

Answer 1

You should use model attributes' names inside ${} . There is a mismatch between model.addAttribute("category", categories); and th:each="category : ${categories}" .

Change model attribute name to "categories" and it should be fine

model.addAttribute("categories", categories);