Can't click on categories.

Question

When I click on each of the categories (e.g. http://localhost:8080/category/1) I get a Whitelabel error.

I've put in the main body of Category.html below:

<div class="gifs container">
    <!--
        In the div element, replace the 'category name' text
        with the value of the 'name' field of the 'category'
        object from the model map
    -->
    <div class="chip" th:text="${category.name}">category name</div>
    <div class="row">
        <!--
            Repeat the div element for each object in the 'gifs'
            collection of the model map. Each object in the loop
            should be named 'gif'
        -->
        <div class="col s12 l4">
            <!--
                    In the a tag, make the href attribute point to
                    the GIF detail page using the 'name' field of
                    the 'gif' object from the loop above
             -->
            <a>
                <!--
                    In the img tag, make the src attribute point
                    to the static GIF image, according to the 'name'
                    field of the 'gif' object from the loop above
                -->
                <img src="http://placehold.it/200x200" />
                <!--
                    In the a tag, make the class attribute have the value
                    of 'mark favorite' or 'unmark favorite' according to
                    the 'favorite' field of the 'gif' object from the
                    loop above
                -->
                <a href="#" class="mark favorite"></a>
            </a>
        </div>
    </div>
</div>

And this is my CategoryRepository.java

package com.teamtreehouse.giflib.data;

import com.teamtreehouse.giflib.model.Category;
import org.springframework.stereotype.Component;

import java.util.Arrays;
import java.util.List;

@Component
public class CategoryRepository {
    private static final List<Category> ALL_CATEGORIES = Arrays.asList(
                            new Category(1, "Technology"),
                            new Category(2, "People"),
                            new Category (3, "Destruction"));


    public List<Category> getAllCategories() {
        return ALL_CATEGORIES;
    }

    public Category findById(int id) {
        for (Category category : ALL_CATEGORIES) {
            if (category.getId() == id) {
                return category;
            }
        }
        return null;
    }
}

But I'm not sure where the problem is coming from. The main categories page works fine, it's just the actual categories themselves.

Thank you very much in advanced for any help.

Answer 1 · 2019-12-11T18:53:45Z

December 11, 2019 6:53pm

'''HTML

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>

<link rel="icon" th:href="@{/favicon.png}" />

<link rel="stylesheet" th:href="@{/vendor/materialize/css/materialize.css}" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" th:href="@{/app.css}" />

<title th:text="'giflib | ' + ${category.name}">giflib | Category</title>

</head> <body> <div class="navbar-fixed"> <nav> <div class="container"> <a th:href="@{/}" class="brand-logo">gif<span>.</span>lib</a> <a href="#" data-activates="mobile-nav" class="button-collapse right"><i class="material-icons">menu</i></a> <ul class="right hide-on-med-and-down"> <li><a th:href="@{/}">Explore</a></li> <li><a th:href="@{/categories}">Categories</a></li> <li><a th:href="@{/favorites}">Favorites</a></li> </ul> <ul id="mobile-nav" class="side-nav"> <li><a th:href="@{/}">Explore</a></li> <li><a th:href="@{/categories}">Categories</a></li> <li><a th:href="@{/favorites}">Favorites</a></li> </ul> </div> </nav> </div> <div class="search-bar container"> <div class="row"> <div class="col s12"> <form action="#" method="get"> <div class="input-field"> <input name="q" type="search" placeholder="Search all gifs..." required="required" autocomplete="off"/> <i class="material-icons">search</i> </div> </form> </div> </div> </div> <div class="gifs container">  <div class="chip" th:text="${category.name}">category name</div> <div class="row">  <div class="col s12 l4">  <a>  <img src="http://placehold.it/200x200" />  <a href="#" class="mark favorite"></a> </a> </div> </div> </div>

'''

I can't seem to post it without it malfunctioning and looking like a mess, but this is my best shot.

Answer 2 · 2019-12-11T19:25:41Z

December 11, 2019 7:25pm

This is my category controller class.

'''Java

package com.teamtreehouse.giflib.controller;

import com.teamtreehouse.giflib.data.CategoryRepository; import com.teamtreehouse.giflib.data.GifRepository; import com.teamtreehouse.giflib.model.Category; import com.teamtreehouse.giflib.model.Gif; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller public class CategoryController { @Autowired private CategoryRepository categoryRepository;

@Autowired
private GifRepository gifRepository;

@RequestMapping("/categories")
public String listCategories(ModelMap modelMap) {
    List<Category> categories = categoryRepository.getAllCategories();
    modelMap.put("categories",categories);
    return "categories";
}

@RequestMapping ("/categories/{id}")
public String category(@PathVariable int id, ModelMap modelMap) {
    Category category = categoryRepository.findById(id);
    modelMap.put("category", category);

    List<Gif> gifs = gifRepository.findByCategoryId(id);
    modelMap.put("gifs", gifs);
    return "category";
}

}

'''

And this is my category model

'''Java

package com.teamtreehouse.giflib.model;

public class Category {

private int id;
private String name;

public Category(int id, String name) {
    this.id = id;
    this.name = name;
}

public int getId() {
    return id;
}

public void setId(int id) {
    this.id = id;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

}

'''

Answer 3 · 2019-12-13T15:55:10Z

December 13, 2019 3:55pm

So I believe I see the issue now.

This is the URI you gave initially, saying you couldn't hit the page:

http://localhost:8080/category/1

And this is the URI you are trying to hit in your CategoryController:

@RequestMapping ("/categories/{id}")

There is inconsistency between the two URIs and I believe this is where you are going wrong.

Welcome to the Treehouse Community

Looking to learn something new?

Alastair Herd

Alastair Herd

Can't click on categories.

Isaiah Duncan

Isaiah Duncan

3 Answers

Alastair Herd

Alastair Herd

Isaiah Duncan

Isaiah Duncan

Alastair Herd

Alastair Herd

Isaiah Duncan

Isaiah Duncan

Isaiah Duncan

Isaiah Duncan