작성
·
375
0
안녕하세요
9.5.1 스스로 해보기에 추가 학습으로
좋아요/좋아요 취소 버튼을 만들었습니다.
이제
각 게시물에 좋아요 누른 사람의 목록을 input 창에 나열시키고 싶습니다.
전제조건 : 로그인과 관계없이 누구나 그 목록을 볼 수 있습니다.
models/post.js
db.Post.belongsToMany(db.User, { as: "User2", through: "Like" });
models/user.js
db.User.belongsToMany(db.Post, { as: "Post2", through: "Like" });
}
routes/page.js
router.get("/", async (req, res, next) => {
try {
const posts = await Post.findAll({
include: [
{
model: User,
attributes: ["id", "nick"],
},
{
model: User,
attributes: ["nick"],
as: "User2",
},
],
order: [["createdAt", "DESC"]],
});
res.render("main", {
title: "NodeBird",
twits: posts,
});
} catch (err) {
console.error(err);
next(err);
}
});
추가한 코드는 아래와 같습니다.
{
model: User,
attributes: ["nick"],
as: "User2",
},
views/main.html
{% for twit in twits %}
<div class="twit">
<input type="hidden" value="{{twit.User.id}}" class="twit-user-id" />
<input type="hidden" value="{{twit.id}}" class="twit-id" />
<div class="twit-author">{{twit.User.nick}}</div>
{% if not followingIdList.includes(twit.User.id) and twit.User.id
!==user.id %}
<button class="twit-follow">팔로우하기</button>
{% endif %}
<!-- '수정', '삭제' 버튼 -->
{% if user.id === twit.User.id %}
<button class="twit-delete">삭제</button>
<button class="twit-update">수정</button>
{% endif %}
<!-- 게시글, 이미지 -->
<br />
<br />
<div class="twit-content">{{twit.content}}</div>
{% if twit.img %}
<br />
<div class="twit-img"><img src="{{twit.img}}" alt="섬네일" /></div>
{% endif %}
<br />
{% if not likeIdList.includes(twit.id) %}
<!-- 좋아요 안 누른 상태 -->
<button class="twit-like" style="cursor: pointer">
<img src="../notlike.png" class="twit-notlike-icon" />
</button>
{% else %}
<!-- 좋아요 이미 누른 상태 (취소하고 싶다면) -->
<button class="twit-notlike" style="cursor: pointer">
<img src="../like.png" class="twit-like-icon" />
</button>
{% endif %}
<!-- 좋아요를 누른 사람들 목록 -->
<input type="text" value="{{twit.User2.nick}}" />
</div>
{% endfor %}
추가한 코드는 아래와 같습니다
<input type="text" value="{{twit.User2.nick}}" />
[결과]
웹에서 input 상자가 빈 상자로 나옵니다.
개발자 도구 Elements에는 다음과 같이 나옵니다
어디부터 잘못된 걸까요..?
답변 1
0
일단 console.log(posts) 해보세요. 좋아요 누른 사람은 여러명일 수 있으므로 user2는 배열일 겁니다. 그렇다면 넌적스에서도 for문을 사용하셔야 하고요.