프로그램 개발

[Javascript]news api 다루기

곽가누 2024. 1. 22. 02:40
async function apiManager() {
  const apiKey = "2721d1f0de38415b978ddeed5ff2291a";
  const topic = "농심";
  const apiUrl = `https://newsapi.org/v2/everything?q=${topic}`;

  try {
    const response = await fetch(`${apiUrl}&apiKey=${apiKey}`);

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();
    const newsList = document.getElementById("news-list");

    if (newsList) {
      // newsList가 존재하는지 확인
      data.articles.forEach((article) => {
        const listItem = document.createElement("li");

        const link = document.createElement("a");
        link.href = article.url;
        link.textContent = article.title;

        listItem.appendChild(link);
        newsList.appendChild(listItem);
        console.log(article);
        console.log(listItem);
        console.log(link);
      });
    } else {
      console.error("Error: newsList is null");
    }
  } catch (error) {
    console.error("Error:", error);
  }
}

// 함수 호출
apiManager();

 

결과 확인은 F12 눌러서 개발자도구에서 확인 json형식으로 뜸