본문 바로가기

내일배움 캠프/TIL

fetch api를 이용해서 서버에서 데이터 가져오기

const response = await fetch('url {
        headers: {
        	/**content-type 이나 Authorization 같은 내용들 */
        
        },
        method: '메소드', /**GET POST PUT PATCH DELETE 등등의 메소드 형식*/
        body: JSON.stringify(data), // body의 데이터 유형은 반드시 "Content-Type" 헤더와 일치해야 함
    })
    
/**JSON 형식으로 변경*/
response_json = await response.json()

의외로 데이터를 가져오는거나 주는거는 위에 적힌대로 형식대로 하면 되게 편하게됬지만....

response_json.forEach(e => {
        document.getElementById('todo').innerHTML += "<details id='todo" + e.id + "' open></details>"
        todo = document.getElementById('todo' + e.id)
        todo.innerHTML = '<summary>' + e.id + '.   ' + e.title + '</summary>' +
            '<p>' + '내용:' + e.content + '</p>' +
            '<p>수행여부:<input type="checkbox" id=is_done' + e.id + ' name="is_done" value="' + e.is_done + '" onclick=is_done(' + e.id + ',' + e.is_done + ')></p>' +
            '<p><button onclick=tododelete(' + e.id + ')>삭제</button></p>'
            
        if (e.is_done == true) {
            console.log('실행 되었습니다')
            todo.innerHTML = '<summary>' + e.id + '.   ' + e.title + '</summary>' +
                '<p>내용:' + e.content + '</p>' +
                '<p>완료시간:' + e.completion_at + '</p>' +
                '<p><button onclick=tododelete(' + e.id + ')>삭제</button></p>'

        }
    });

바닐라 js가 나한테 엄청난 고통을 줬다....