javaScript - open API 특정 배열 데이터 숫자 열(col) 정렬 및 효과 적용

목표

javaScript open API로 불러온 데이터 table에서, 숫자로 이루어진 열의 상위 값 5개와 하위 값 5개의 컬러를 바꿔보자.

---

문제 인식

• js open API로 호출한 배열 데이터 속, 숫자로 이루어진 특정 열(column)을 순회하고 정렬할 수 있는 method 필요

---

해결

1. document 객체를 이용해 특정하고자 하는 열(column)에 class 부여 후, querySelectorAll을 이용해 특정 열(column) 배열로 반환

const indexColumn = document.querySelectorAll(".index");

2. 가져온 특정 열(column) 배열을 Array 객체의 'from' method를 통해 Number로 파싱 후, textContent만 얕게 복사해 새로운 배열 객체 반환

const numbers = Array.from(indexColumn, (td) => Number(td.textContent));

3. 새로운 Number 배열 객체를 sort와 slice method를 통해 오름차순 / 내림차순 요소 정렬 후 상위 1~5위의 값만을 따로 변수에 저장

const top5 = numbers.sort((a, b) => b - a).slice(0, 5);
const bottom5 = numbers.sort((a, b) => a - b).slice(0, 5);

4. forEach method를 통해 가져온 특정 열(column)의 배열 요소 하나하나 순회하면서, includes method를 통해 top5와 bottom5의 Number textContent Node값이 포함된다면 style.color와 style.fontWeight method를 통해 색깔과 폰트 굵기를 변경할 수 있다.

indexColumn.forEach((td) => {
  if (top5.includes(Number(td.textContent))) {
    td.style.color = "blue";
    td.style.fontWeight = "bold";
  } else if (bottom5.includes(Number(td.textContent))) {
    td.style.color = "red";
    td.style.fontWeight = "bold";
  }
});

---

회고

• React JS로 이미 꽤 여러번 팀 프로젝트를 진행해왔지만, 바닐라 자바스크립트에 대한 기초 지식이 부족하다고 느꼈다. 해당 목표를 수행하기 위해 fetch, json(), innerHTML, innerText, textContent, hasOwnProperty, Array.from(), sort, slice, includes, forEach, Number 등 정말 다양한 객체와 그 method를 이해 및 응용할 수 있었다.

• mdn web docs를 참조하면서, 위 작성한 것 외에도 정말 다양한 자바스크립트 내장 method가 있다고 느꼈다. 자주 사용하는 method 외에도, 필요한 기능이 있을 때 이 method를 사용하면 되겠구나 할 수 있을 정도의 지식을 갖추는 것이 필요하다고 생각했다.