Wealth List (2) - forEach

 

 

function updateDOM(providedData = data) {
  main.innerHTML = "<h2><strong>Person</strong> Wealth</h2>";

  providedData.forEach((element) => {
    const div = document.createElement("div");
    div.classList.add("person");
    div.innerHTML = `<strong>${element.name}</strong> ${formatMoney(
      element.money
    )}`;
    main.appendChild(div);
  });
}

 

- 함수의 parameter 

updateDOM함수를 호출할 때, parameter가 없으면 저번 시간에 생성했던 data array가 들어온다.

 

- main.innerHTML 부분을 원래 가장 기본 코드로 넣어줘서 main을 clear

 

- parameter로 들어온 data array를 forEach Method를 사용해서 loop through

한 element가 들어올 때마다 div를 만들어 주고 이름과 가진 재산을 div에 넣어준 후

main의 child로 넣어주면 화면에 나타남!

 

- 재산 같은 경우는 data array에 그냥 숫자(eg. 12345689)로만 저장 되어 있어서 실제 돈의 형태로 바꿔주기 위해 함수를 새로 만들었다.

 

 

 

// format number as money
function formatMoney(number) {
  return "$" + number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
}

 

 https://stackoverflow.com/questions/149055/how-to-format-numbers-as-currency-string

여기를 참고.

paramet와 앞에 달러 싸인만 넣어줘서 return 해주면 

123456 => $123,456

의 형태로 바껴서 화면에 나타난다.

 

 

 

 

 

userBtn.addEventListener("click", getRandomUser);

add User 버튼을 눌러서 User를 추가 시키고 싶을 때,

event listener를 만들면 된다.

이미 getRandomUser 함수를 만들어 놨기 때문에 따로 코드를 더 작성할 필요 없다.

(getRandomUser을 통해서 알아서 user data를 받아와서 array에 저장하고 DOM을 update시켜준다.)