Wealth List (1)

 

특별히 예쁜 UI이거나, 엄청 유용해서 앞으로도 계속 사용할 프로그램은 아니고..

- fetchAPI를 이용해서 data를 받아와서 동적으로 화면에 표시

  (.then을 이용해서 chain을 만들기 보다는 async/await를 이용해서 깔끔하게 구현)

- forEach, map, sort, filter, reduce와 같은 Array method

를 연습하기 위한 프로젝트

 

 

 

1. get Elements

const main = document.getElementById("main");
const userBtn = document.getElementById("user");
const doubleBtn = document.getElementById("double");
const showBtn = document.getElementById("show-mio");
const sortBtn = document.getElementById("sort");
const calBtn = document.getElementById("calculate-wealth");

3rd Party API를 이용해서 random User를 받아와서 넣을 main 섹션과 나머지 버튼들을 가져왔다.

 

 

 

 

2. get Random User (fetch, async, await)

let data = [];

getRandomUser();


async function getRandomUser() {
  const res = await fetch("https://randomuser.me/api");
  const data = await res.json();
  console.log(data);
}

randomuser.me/api 를 이용해서 random user를 받아올 것이다.

받아온 데이터를 콘솔에 띄워보면

 

우리가 필요한건 results라는 array에서 

name : {title: "Mr", first:"Victor", last:"Madsen"}

이 부분

 

 

 

async function getRandomUser() {
  const res = await fetch("https://randomuser.me/api");
  const data = await res.json();
  const user = data.results[0];
  const newUser = {
    name: `${user.name.first} ${user.name.last}`,
    money: Math.floor(Math.random() * 1000000),
  };
  console.log(newUser);
}

사용자 이름과 재산을 랜덤으로 생성

 

 

 

 

 

3. add users to data array

let data = [];

getRandomUser();
getRandomUser();
getRandomUser();

//get random users and their money

async function getRandomUser() {
  const res = await fetch("https://randomuser.me/api");
  const data = await res.json();
  const user = data.results[0];
  const newUser = {
    name: `${user.name.first} ${user.name.last}`,
    money: Math.floor(Math.random() * 1000000),
  };
  //   console.log(newUser);

  addData(newUser);
}

// add User to data array
function addData(obj) {
  data.push(obj);
  console.log(data);
}

 

data array에 3명의 random users와 그들의 재산이 저장되었다!