2023-01-10 3주차 Open API 붙여보기

function listing() {
    $('#cards-box').empty()
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/web/api/movie",
        data: {},
        success: function (response) {
            let rows = response['movies']
            for (let i = 0; i < rows.length; i++) {
                let title = rows[i]['title']
                let desc = rows[i]['desc']
                let image = rows[i]['image']
                let star = rows[i]['star']
                let comment = rows[i]['comment']

                let star_image = '⭐'.repeat(star)


                let temp_html = ` <div class="col">
                                    <div class="card">
                                        <img src="${image}">
                                        <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-box').append(temp_html)

            }

        }

    })
}

하는 방법은 전에 공부했던 ajax랑 똑같음 반복문 변수 선언 후 해당 자리에 ${} 넣어 주기 

 

let star_image = '⭐'.repeat(star)

자바스크립트 내장함수 : repaeat 사용

반복해서 문자열을 나오게 하는 3넣으면 3번씩 반복 4넣으면 4번씩 반복하는

별 갯수 만큼

 

완성본 title, desc, image, star, comment 잘 적용된 모습