[TIL] #DAY - 058 - forEach를 이용하여 div 추가 (javascript, Django)

---

---

forEach를 이용하여 div 추가

백엔드는 장고 DRF로  제작하고, 저장한 db를 프론트로 가져오는 방법 중 하나!

 

---

---

---

[문제 요약]

1. 복잡한 div를 한번에 가져오기
2. 피드나, 댓글등 반복되는 데이터를 템플릿에 맞게 설정 가능

[풀이 요약]

1. document.getElementsByClassName('FeedBoxCont')[0];
2. forEach 로 반복문 돌리기
3. innerHTML 로 형식에 맞게 게시글 내용 넣어주기

[코드]

# 게시글 조회하는 함수
async function getIndexFeedList(){
    const response = await fetch(`${backEndBaseUrl}/articles/`,{
        headers: {
            'content-type': 'application/json',
            "Authorization":"Bearer " + localStorage.getItem("access")
        },
        method:'GET',
    })

    response_json = await response.json()
    return response_json
}

window.onload = async function getIndex_API(){
    feed_list = await getIndexFeedList()

var wrap = document.getElementsByClassName('FeedBoxCont')[0]; # html 안에 class명 지정
														      # class="FeedBoxCont"

feed_list.forEach(feed => {
        wrap.innerHTML += `<div>${feed}</div>`                # innerHTML : 위에서 지정해준 class 안에 html 내용 담아주기
    });