3-1. 연습 겸 복습 - 스파르타피디아에 openAPI 붙여보기

우선 우리가 원래 만들었던 웹사이트에 들어가보면 영화이미지와 코멘트를 달수있었던 카드들이 나온다.

이 카드들을 아래의 api를 받아와서 바꿔주려한다.

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

 

script 항목에서 전에 만들었던 fetch 밑에 새로운 fetch를 생성후 아래처럼 작성해준다.

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

                let rows = data['movies']

                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)

                });

            })

그러고 console창을 확인해보면 아래와 같다.

이제 카드를 만들어서 붙여야한다.

아래 처럼 작성하고 실행하면 그아래 사진처럼 결과가 나온다.

이렇게 영화 포스터들을 붙여봤다. 처음에 붙였던것은 없애고 별점도 해보자.

 

먼저 처음에 있던 4개의 영화포스터들을 없애준다. 그건 아래 코드를 작성하면 된다.

$('#cards').empty()

그리고 별점을 api에서 불러오는만큼 나타내고 싶은데 api에서는 아래 보이는 바와 같이 숫자로 나와있다.

하지만 js에서는 이미지로 보여주는건 쉽다.

let star_image = '⭐'.repeat(star)

이렇게 하면 이미지 별의 개수가 api에 써있는 숫자만큼 나타내게된다. 아래와 같이 작성하면 된다.

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']

                    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="mycoment">${comment}}</p>

                                            </div>

                                        </div>

                                    </div>`

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

                });

            })

그럼 이제 결과는 아래와 같다.

이제 파이썬 공부하러 가보자.