12. 메모장에 오픈 api 붙이기

    $(document).ready(function () {
        listing();
    });

    function listing() {
        console.log('화면 로딩 후 잘 실행되었습니다');
    }

위의 코드를 메모메모 페이지를 만들어두었던 html 코드 <script> 부분에 넣어주면 로딩 후 바로 실행이 되게 만들어 줄 수 있다.

 

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

                        let temp_html=`<div class="card">
            <img class="card-img-top" src="${image}"
                 alt="Card image cap">
            <div class="card-body">
                <h5 href="${url}" class="card-title">${title}e</h5>
                <p class="card-text">${desc}</p>
                <p class="card-comment">${comment}</p>
            </div>
        </div>`
                        $('#card-box').append(temp_html)
                    }
                }
            })
    }

1. listing()이라는 함수를 만들어서 ajax와 jquery를 이용해 오픈 api에 있는 article 정보들을 메모메모 페이지에 카드형식으로 넣어준다.

2. 기존에 만들어두었던 중복되는 카드들을 없애기 위해 empty() 함수를 사용

3. ajax로 GET방식으로 api를 받아와서 for문을 이용해 article 딕셔너리 안에 있는 comment, desc, image, title, url 들을 받아온다.

4. temp_html을 만들어서 백틱을 이용해 카드 형식으로 붙여넣어준다.

5. append() 함수를 이용해서 카드들을 넣어준다.