For each?

Question

Could you go thogh more detail with the for each loop and how it unravels in the html. Does it achive its 3 a row look via the code presented or is this tied to the google css magic.

Answer 1 · 2016-02-10T23:04:27Z

February 10, 2016 11:04pm

Hi. (maybe i can help)

The tags they are talking about are just ordinary html tags. i.e.

<div>, <h1>, <p>, <img>

The div tag is an unstyled tag that is often used to group things on a page that are related .

-James, I think that is where some of the disconnect is happening, just not being too familiar with HTML.

You can apply the th:each to any tag though, not just a div tag.

Your stack overflow question has one line that is extremely close to what they are looking for in this challenge.

<li th:each="item : *{list}" th:text="${item}">Item description here...</li>

Spoiler Alert Just so I'm not beating around the bush about the answer, I'll just give it.

What they want is you to do is delete all the

<li>

tags and add ...

<li th:each="contact : ${contacts}" th:text="${contact.firstName}"></li>

th:each is all Thymeleaf. Essentially what it's doing is for each contact it creates HTML markup for it ie

<li> Billy </li>

So what you see as

<ul>
   <li th:each="contact : ${contacts}" th:text="${contact.firstName}"></li>
<ul>

Thymeleaf sees it and turns it into ....

<ul>
  <li> Billy </li>
  <li>Bob</li>
  <li>Thorton</li>
</ul>

...or whatever firstNames you have stored in contacts.

You can use th:each in any HTML tags you want repeated for an unknown amount or just too many to waste time hand coding all that HTML.

th:text will put whatever variable value in between the tags.

The class="col s12 l4" are three separate classes defined in the css that the Materialize css framework provides. That's what defines how each HTML tag will be styled and fit on the page.

Most css frameworks provide a grid that let you chunk up the page in 12 columns using classes. The s12 class says if the screen width is small (ie. phone) that the HTML tag (or DOM Element) will take up 12 out of 12 columns(ie. shrink the window, and there will only be one gif per row). The l4 (Tha's a lowercase L in there btw) says if the screen is large then the element will take up 4/12 of the screen.(ie. 1/3) and be in rows of three.

Most all of this stuff is outside the scope of the course, but I definitely see how you can get tripped up on what he's trying to teach. I wouldn't worry too much about it.

In summary, copy the answer and move on. You'll see the for each concept in most other templating languages just with some other type of syntax. Same with the css styling. The details aren't too important, just the concept.

I hope a little of that helped and your not all like "what you've just said is one of the most insanely idiotic things I have ever heard. At no point in your rambling, incoherent response were you even close to anything that could be considered a rational thought. Everyone in this room is now dumber for having listened to it. I award you no points, and may God have mercy on your soul."

Keep on keeping on.

Answer 2 · 2016-02-02T06:18:23Z

February 2, 2016 6:18am

The 3 in a row is tied to the CSS. The class col s12 l4 creates that look. Well those 3 classes.

Answer 3 · 2016-02-06T05:38:39Z

February 6, 2016 5:38am

I don't think malevolentbunny's response actually answered Ryan's question (about going into detail about the loop.

Looking at time index 06:11 of this video:

https://teamtreehouse.com/library/spring-basics/modeling-storing-and-presenting-data/create-an-index-page-that-presents-a-list-of-data

It seems to reference this section of the home.html file:

    <div class="gifs container">
        <div class="row">
            <div th:each="gif : ${gifs}" class="col s12 l4">
                <a th:href="@{'/gif/' + ${gif.name}}">
                    <img th:src="@{'/gifs/' + ${gif.name} + '.gif'}" />
                    <a href="#" th:class="(${gif.favorite} ? 'un' : '') + 'mark favorite'"></a>
                </a>
            </div>
        </div>
    </div>

However then you get this challenge associated with this video:

https://teamtreehouse.com/library/spring-basics/modeling-storing-and-presenting-data/create-an-index-page-with-thymeleaf

...and suddenly they are talking about <li> tags, not div tags.

In fact there is not a single <div> anywhere in the provided code for:

src/main/resources/templates/contact_list.html

.

Watching the full 07:28 minute video I don't remember see anything about <li> or <ul> tags.

I just get this sense of "disconnect" between what we are learning in the video and

what the challenge is about (or focused on).

So I google around a little and found this page:

http://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

which had this html code:

<li th:each="book : ${books}" th:text="${book.title}">En las Orillas del Sar</li>

which means that you can definitely have "th:each" used inside a <li> tag

However the directly paragraph above it says:

"Now th:each, which repeats the element it’s in as many times as specified by the array or list returned by its expression, creating also an inner variable for the iteration element with a syntax equivalent to that of a Java foreach expression"

I'm a little hazy on exactly what this explanation is supposed to imply..

On this StackOverFlow page:

http://stackoverflow.com/questions/26049708/spring-thymleaf-and-lists-of-strings

..there's another bit of html code that nests th:each inside a th:block:

    <ul>
    <th:block th:object="${greeting}">
       <li th:each="item : *{list}" th:text="${item}">Item description here...</li>
    </th:block>
    </ul>

Not sure if that is what the challenge is looking for though..

Searching for more about how "th:each" works I found this Thymeleaf doc page:

http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html

that talks about a "precedence mechanism"

I don't remember this from any of the videos

(talking about precedence ordering from 1 to 9).

But nothing gets me any closer to what they are looking for in the challenge,

either some kind of <li> tag with th:each or some kind of <div> structure with th:each?

Like Ryan I'm lost on the loop details..

Answer 4 · 2016-02-16T06:27:08Z

February 16, 2016 6:27am

Hi David,

Thanks for a great reply.

It was very insightful.

I would give you a "Best Answer" but there's no checkbox for that on your comment.

Hopefully Ryan got something out of your explanation as well (if he's still following this thread...)

Welcome to the Treehouse Community

Looking to learn something new?

Ryan Leenay

Ryan Leenay

For each?

4 Answers

davidschreiter

davidschreiter

missgeekbunny

missgeekbunny

james white

james white

james white

james white