자바스크립트 JSON 활용하여 코드짜보기

'모던자바스크립트'의 502페이지 예제입니다!

목표

• dummyjson.com/quotes 사이트의 json 데이터를 가져온 후 콘솔 창에 결과를 표시해 봅니다.
• 가져온 데이터가 어떤 구조로 이루어져 있는지 확인하고 그 중에서 명언과 말한 사람 정보를 가져올 수 있는 방법을 생각해봅니다.

1. JSON 데이터를 가져온 후 콘솔창에 결과를 표시해 보세요.

<script>
    function quotes(){
        fetch("json/quotes.json")
        .then(res => res.json())
        .then(items => {
            console.log(items); 
    })
};
quotes();                 
</script>

.then(이름) 까지가 json을 활용하는 기본적인 문법입니다. 

 

json을 활용해 불러온 데이터를 콘솔창에 띄워 확인합니다.

---

2. JSON데이터에서 명언 1개를 가져와 내용과 말한 사람을 표시해 보세요.

let currentIndex = 0;

function quotes(){
    fetch("json/quotes.json")
    .then(res => res.json())
    .then(items => {
        const result = document.querySelector("#result");

        const quote = result.querySelector(".quote");
        const author = result.querySelector(".author");

        quote.innerHTML = items.quote[currentIndex].quote;
        author.innerHTML = `-${items.author[currentIndex].author}`;

        currentIndex = (currentIndex + 1) % items.quote.length;
    })
    .catch((err) => console.log(err));
};
quotes();

setInterval(quotes, 5000);

 

챗 GPT도 포기한 내코드..... 왜 안되는지 아시는 분은 댓글좀요..

개짜증나