JS연습(유저정보테이블 만들기)

오늘 해볼건 인터넷에서 mockdata.json을 가져와서

(데이터 js에 뿌리는건 stack overflow코드 가져옴)

1.email 다 inflearn.com 으로 바꾸고

2.모든 직원들 이름은 대문자로 Uppercase로 바꾸고

3.country가 아시아면 그냥 asia로 나오고

4.아프리칸인 사람들은 background color 그린으로 텍스트 칼라는 하얀색으로, 폰트 굵기 굵게

5.mockData에서 100번째 유저에게 경품당첨을 한다고 가정함. 100번째 유저의 이름을 console.log로!

6.100번째, 200번째, 300번째, 그리고 마지막 유저에게 경품을 준다고 가정했을 때 그 사람들의 이름을 배열로 추출

 

더 추가할게 생기면 추가하고! 먼저 이것부터 하기

 

 

325개의 유저데이터 .json

먼제 유저 테이블은 https://www.getpapercss.com/ 에서 가져오기

PaperCSS

html head 부분에 넣고

<link
      rel="stylesheet"
      href="https://unpkg.com/papercss@1.8.3/dist/paper.min.css"
/>

thead 부분을 json파일에 맞게 수정하기

<div class="paper container" style="margin: 10vh auto;">
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Gender</th>
            <th>Email</th>
            <th>Country</th>
          </tr>
        </thead>
        <tbody id="userTbody"></tbody>
      </table>
    </div>

먼저 스택오버플로우에서 가져온 코드 입력해서 mockData 배열 만들고

forEach로 유저 데이터를 tbody에 뿌려주면(onload="init()")

 

<script>
      let mockData = []
      let data = new Promise((resolve, reject) => {
        fetch('./MOCK_DATA.json')
          .then((response) => response.json())
          .then((data) => {
            mockData = [...data]
          })
          .catch((error) => console.log(error))
      })

      function init() {
        const userTbody = document.getElementById("userTbody")

        mockData.forEach((item) => {
        
          userTbody.innerHTML += `
                <tr>
                  <td>${item.id}</td>
                  <td>${item.name}</td>
                  <td>${item.gender}</td>
                  <td>${item.email}</td>
                  <td>${item.country}</td>
                </tr>
              `
        })}
</script>

짜란~ 이렇게 깔끔하게 나온다!

이제 여기서 위에 적어둔 오늘의 미션을 하나씩 해보면

 

1. email 다 dovard.com 으로 바꾸고

=> split사용하기

let emailId = []
emailId = item.email.split("@")[0]

mockData forEach 돌리는 함수 안에 넣어주면 된다!

처음에 함수밖에서 새로 forEach를 돌려야하는건가 생각했는데 item을 받아오려면

새롭게 변수선언해서 배열만들어 사용!

짠~

2. 모든 직원들 이름은 대문자로 Uppercase로 바꾸기

==> toUpperCase 사용하기

<td>${item.name.toUpperCase()}</td>

이렇게 바뀐다!

 

3. country가 아시아면 그냥 asia로 나오고

==> 여기서 아시아를 간단하게 한국, 일본, 중국만으로 설정해서 풀었다

==>indexOf() 함수 사용!!

 

indexOf란 배열에서 특정 배열값이 존재하는지 알려주는 내장함수다.

indexOf >-1 인 경우 => 존재

else => 없음

을 이용해서 if 문을 돌리자

mockData.forEach((item) => {
          let emailId = []
          emailId = item.email.split("@")[0]
          const asia = ['South Korea','Japan','China']
          
          if (asia.indexOf(item.country) > -1) {
            userTbody.innerHTML += `
                  <tr>
                    <td>${item.id}</td>
                    <td>${item.name.toUpperCase()}</td>
                    <td>${item.gender}</td>
                    <td>${emailId}@dovard.com</td>
                    <td>Asia</td>
                  </tr>
                `
            } else {
              userTbody.innerHTML += `
                  <tr>
                    <td>${item.id}</td>
                    <td>${item.name.toUpperCase()}</td>
                    <td>${item.gender}</td>
                    <td>${emailId}@dovard.com</td>
                    <td>${item.country}</td>
                  </tr>
                `
            }
        })

 

이러면 Asia로 바뀌었다!

 

 

4.동남아시아 사람들은 background color 그린으로 텍스트 칼라는 하얀색으로, 폰트 굵기 굵게

==>동남아시아 배열 만들어서 분류하고, style주기

 

const seAsia = ['Philippines','Indonesia']
          
          if (asia.indexOf(item.country) > -1) {
            userTbody.innerHTML += `
                  <tr>
                    <td>${item.id}</td>
                    <td>${item.name.toUpperCase()}</td>
                    <td>${item.gender}</td>
                    <td>${emailId}@dovard.com</td>
                    <td>Asia</td>
                  </tr>
                `
        
            } else if (seAsia.indexOf(item.country) > -1) {
              userTbody.innerHTML += `
                  <tr style="background-color:green; color:white; font-weight:bold;">
                    <td>${item.id}</td>
                    <td>${item.name.toUpperCase()}</td>
                    <td>${item.gender}</td>
                    <td>${emailId}@dovard.com</td>
                    <td>${item.country}</td>
                  </tr>
                `
            } else {
              userTbody.innerHTML += `
                  <tr>
                    <td>${item.id}</td>
                    <td>${item.name.toUpperCase()}</td>
                    <td>${item.gender}</td>
                    <td>${emailId}@dovard.com</td>
                    <td>${item.country}</td>
                  </tr>
                `
            }

짠!