[웹개발 입문 강의] [JavaScript] Fetch 복습

들은 강의

[웹개발 입문 강의] [JavaScript] Fetch 복습

hotdog7778 2023. 6. 8. 17:27

스파르타 코딩클럽 웹개발 종합반 인강 - 공부 기록

수강 시작 ~

2023. 06. 06 ~

https://github.com/hotdog7778/sparta

자바스크립트 복습~

목표. 영화소개 페이지에 카드를 만들어서 붙여보자.

- index.html 에서 진행

- 영화 코멘트, 설명, 이미지, 별점, 제목 데이터가 있는 API를 준비.

http://spartacodingclub.shop/web/api/movie

fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => {
    let rows = (data['movies'])

    $('#cards').empty()

    rows.forEach((a) => {
        let title = a['title']
        let desc = a['desc']
        let comment = a['comment']
        let star = a['star']
        let image = a['image']
        // console.log(title,desc,comment,star,image)

        // star는 숫자인데 repeat를 사용해서 그숫자 만큼 별이미지를 반복시키자.
        let star_image = '⭐'.repeat(star)

        let temp_html = `<div class="col">
                            <div class="card h-100">
                                <img src="${image}"
                                    class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">${title}.</h5>
                                    <p class="card-text">${desc}</p>
                                    <p>${star_image}</p>
                                    <p class="mycomment">${comment}</p>
                                </div>
                            </div>
                        </div>`

        $('#cards').append(temp_html)

    });

})