토이프로젝트(5) - 코인리스트 값을 API를 활용해 등록하기

아래 코드는 암호화폐 목록을 불러와서 <select> 요소에 옵션으로 추가하는 기능을 구현한 것

coinlist.js파일을 우선 추가했다.

const apiKey =
  "bd4f605df59891a7e298a7227117404b2215dba9008a7b6e24206b6aadd5b038";

async function fetchCoinList() {
  try {
    const response = await fetch(
      "https://min-api.cryptocompare.com/data/all/coinlist"
    );
    const data = await response.json();
    return data.Data;
  } catch (err) {
    console.error("Error fetchng coin list:", error);
    return null;
  }
}

fetchCoinList().then((coinList) => {
  if (coinList) {
    let CoinList = Object.keys(coinList);

    let selectElement = document.getElementById("coinlist");

    CoinList.forEach((coinName) => {
      // console.log(coinName, selectElement);
      let optionElement = document.createElement("option");
      optionElement.text = coinName;
      selectElement.appendChild(optionElement);
    });
  } else {
    console.log("Failed to fetch coin list.");
  }
});

fetchCoinList();

• apiKey 상수 정의: 암호화폐 목록을 불러오기 위한 API 요청에 사용할 API 키를 상수로 두기(그냥 다 집어넣으면 코드가 길어져서 이렇게 하는 것 같다.)
• fetchCoinList 함수: fetchCoinList 함수는 암호화폐 목록을 불러오는 비동기 함수. fetch 함수를 사용하여 API에서 암호화폐 목록을 가져오고, 성공적으로 응답을 받으면 JSON 데이터를 추출하고 JSON데이의 Data속성을 반환. 만약 에러가 발생하면 콘솔에 에러 메시지를 출력하고 null을 반환.
• 암호화폐 목록 추가:  값이 성공적으로 불러져왔다면 Object.kyes의 인자에 Data속성으로 받은 객체를 전달하면 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환 여기에서 속성 이름 = 가상화폐 이름. 이후 배열 순환으로 <option>태그 생성 후 <datalist>에 추가하면 아래 화면과 같이 암호화폐 목록 완성

 

 

 

data의 Data속성 출력화면

 

 

 

<datalist>에 추가된 후

 

 

 

Object.keys() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys