[Web] 복습 ( week - 3)

API를 호출하고 데이터를 가공해 브라우저에 나타내본다.

html은 저번에 만들었던 것을 사용한다.

사용할 API

 

fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => {

                let rows = data['movies']

                $('#cards').empty()

                rows.forEach((a) => {

                    let comment = a['comment']

                    let desc = a['desc']

                    let image = a['image']

                    let star = a['star']

                    let title = a['title']

                   

                    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>⭐⭐⭐</p>

                                                <p class="mycomment">${comment}</p>

                                            </div>

                                        </div>

                                    </div>`

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

                })

            })

들어온 값들을 가지고 html이 잘 생성되는 걸 확인할 수 있다.

여기서 별점의 경우 API에서는 숫자로 들어오는데 이걸 가지고 별을 그려야 하는데 이 동작을 자바스크립트 문법을 사용해서 만들 수 있다.

fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => {

                let rows = data['movies']

                $('#cards').empty()

                rows.forEach((a) => {

                    let comment = a['comment']

                    let desc = a['desc']

                    let image = a['image']

                    let star = a['star']

                    let title = a['title']

                    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);

                })

            })

별로 사용할 값을 .repeat(횟수)를 통해서 해당 별점만큼 별을 그려낼 수 있다.

이 값을 별점 자리에 넣어주기만 하면된다.

이제 별점을 반영해서 별이 그려지는 것까지 완성됐다.