EJS에서는
<% %>
안에 자바스크립트 코드를 사용할 수 있다.
하나의 값을 불러올 때는 <%= %>를 사용하고, 자바스크립트 구문을 사용할 땐 <% %>를 사용한다. 문법은 나중에 더 알아봐야겠다.
<% for (const restautrant of restaurants){ %>
<li class="restaurant-item">
<article>
<h2>Restaurant Title</h2>
<div class="restaurant-meta">
<p>Mexican</p>
<p>Address of the restaurant, including city</p>
</div>
<p>
A short description, explaining why this restaurant is awesome!
</p>
<div class="restaurant-actions">
<a href="">View Website</a>
</div>
</article>
</li>
<% } %>
이런 식으로 EJS에선 HTML 콘텐츠를 반복할 수 있다. 이제 불러온 restaurant에서
[
{
"name": "aaaa",
"address": "bbbb",
"cuisine": "cccc",
"website": "https://naver.com",
"description": "eeee"
}
]
각 key별로 값에 접근할 수 있다.
이때 render메서드에 삽입하는 객체에도 restaurants 배열을 추가해줘야 한다.
const storedRestaurants = JSON.parse(fileData);
res.render('restaurants', { numberOfRestaurants: storedRestaurants.length, restaurants: storedRestaurants});
이렇게 되면
배열에 저장된 데이터가 HTML에 출력 된다. 배열에 데이터를 추가하면 반복적으로 추가될 것이다.
이런 식으로 여는 중괄호와 닫는 중괄호를 주의하면서 사용하면 된다.