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

이전글과 같은 data를 이용해서 

 

1. 한국인들 이름만 배열로 추출

2. 첫번째 한국인만 추출

3. 모든 동아시안 중에 마지막 사람 이름만 추출

4. 모든 홀수 tr은 하얀색으로 모든 짝수 tr은 #efefef 배경 색상으로 바꾸기

를 하려한다!

 

 

1. 한국인들 이름만 배열로 추출

const korean = []
        
mockData.forEach((item,idx) => {

	if (item.country === "South Korea") {
    	korean.push(item.name)
    	}
	console.log(korean)
    
    ...

forEach문 안에 if문을 써서 korean배열에 넣어주기

 

 

2. 첫번째 한국인만 추출

시간이 제일 오래 걸렸다.

 

item.country === "한국" 인 객체를 / 새로운 배열에 넣어서 / 0번째 인덱스로 뽑아오기 싫어서

배열에서 조건에 맞는 첫번째 항목을 가져오는게 find 함수라는걸 찾았는데 아직 데이터쓰는게 서툴러서 

function isKorean() {
	if (item.country === "South Korea")
		return true;
	}
          
const firstKorean = item.find(isKorean)
console.log(firstKorean)

이렇게 코드를 썼는데

이런 콘솔 에러가 발생했다........

item.find를 mockData.find 로 고치고

mdn사이트에서 사용한 방식으로 한줄로 적어서 코드를 고치니까

const firstKorean = mockData.find(item => item.country === "South Korea")
console.log(firstKorean)

이렇게 나왔다!

 

 

3. 모든 동아시안 중에 마지막 사람 이름만 추출

=>eastAsia 나라 배열을 만들어서 => if문 => eastAsian만 따로 배열만들기

const eastAsia = ['South Korea','China','Japan']
let eastAsian = []

mockData.forEach((item,idx) => {
	if (eastAsia.indexOf(item.country) > -1) {
            eastAsian.push(item.name)
          }
console.log(eastAsian[eastAsian.length-1])

...

}

 

 

4. 모든 홀수 tr은 하얀색으로 모든 짝수 tr은 #efefef 배경 색상으로 바꾸기

=>idx를 이용하려 한다. if문으로 다른 style 적용

 

mockData.forEach((item,idx) => {
	if (idx % 2 === 0) {
		userTbody.innerHTML += `
        	<tr style="background-color:white;">
            	<td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.gender}</td>
                <td>${item.email}</td>
                <td>${item.country}</td>
            </tr>
            `
    } else {
    	userTbody.innerHTML += `
        	<tr style="background-color:#efefef;">
            	<td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.gender}</td>
                <td>${item.email}</td>
                <td>${item.country}</td>
           	</tr>
            `
    }
})

 

 

짠