API의 데이터로 HTML을 동적으로 채우는 방법

이 튜토리얼에서는 JavaScript의 fetch() 메서드를 사용하여 Harry Potter 캐릭터 API에서 데이터를 가져오고 표시하는 방법을 보여줍니다. 캐릭터 정보가 동적으로 채워지는 웹페이지를 구축해보겠습니다.

먼저 문자 데이터가 표시될 HTML 요소를 대상으로 합니다.

<code class="language-javascript">const charsSection = document.getElementById('chars-container');</code>

다음으로 데이터를 검색하고 필터링하는 API URL과 비동기 함수를 정의합니다.

<code class="language-javascript">const charsURL = 'https://hp-api.herokuapp.com/api/characters';

async function getChars() {
    const response = await fetch(charsURL);
    const allCharsArr = await response.json();
    let newCharsArr = [];
    for (let i = 0; i < allCharsArr.length; i++) {
        if (allCharsArr[i].image.length > 0 && allCharsArr[i].species === 'human') {
            newCharsArr.push(allCharsArr[i]);
        }
    }
    return newCharsArr;
}</code>

getChars() 함수는 데이터를 가져와 JSON으로 변환한 후 관련 이미지와 함께 사람 문자만 포함하도록 결과를 필터링합니다. 이 필터링은 잠재적인 API 불완전성을 해결합니다.

웹페이지는 다음 비동기 함수를 사용하여 채워집니다.

<code class="language-javascript">async function buildPage() {
    const newCharsArr = await getChars();
    for (let i = 0; i < newCharsArr.length; i++) {
        // ... (HTML card creation logic here) ...
    }
}</code>

이 buildPage() 함수는 필터링된 캐릭터 데이터를 반복하고 HTML 요소(캐릭터 카드)를 동적으로 생성하여 캐릭터의 이미지, 이름, 가계, 호그와트 집 및 배우를 표시합니다. innerHTML의 charsSection이 이 카드를 표시하도록 업데이트되었습니다. getChars()은 비동기식이므로 buildPage()도 비동기식이어야 하며 await getChars()의 결과여야 합니다.

다음 이미지는 채워진 웹페이지의 샘플을 보여줍니다. 간결함을 위해 스타일링 세부 사항은 생략되었으며, 전체 프로젝트 코드는 [프로젝트 링크]에서 확인하실 수 있습니다.

이 예는 API 데이터를 사용한 동적 웹페이지 채우기를 보여줍니다. 피드백과 공유에 감사드립니다!

링크

프로젝트 진행 중

프로젝트 저장소

MDN 웹 문서 '웹 API 소개'

원본은 2022년 11월 14일 일반 영어로 Medium for JavaScript에 게시되었습니다.

위 내용은 API의 데이터로 HTML을 동적으로 채우는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!