javaScript - open API 배열 데이터 특정 value 값 바꾸기

목표

javaScript open API로 불러온 배열 데이터 안, 객체 속 key의 value 값이 0인 값을 모두 찾아서 '-'로 바꾼다.

---

문제 인식

• js 배열 속 객체 속 key의 value값을 순회할 수 있는 method가 필요

---

해결

배열 안의 값이 0인 경우:

const arr = [1, 0, 2, 0, 3];

for (let i = 0; i < arr.length; i++) {
  if (arr[i] === 0) {
    arr[i] = '-';
  }
}

console.log(arr); // [1, '-', 2, '-', 3]

객체 속 key의 value 값이 0인 경우:

const obj = { a: 1, b: 0, c: 2, d: 0, e: 3 };

for (let key in obj) {
  if (obj[key] === 0) {
    obj[key] = '-';
  }
}

console.log(obj); // { a: 1, b: '-', c: 2, d: '-', e: 3 }

물론, 객체의 경우 for...in 반복문 대신 Object.keys 또는 Object.entries를 사용하여 반복할 수도 있습니다. 예를 들어, 위의 객체를 Object.keys를 사용하여 반복하면 아래와 같이 작성할 수 있습니다.

const obj = { a: 1, b: 0, c: 2, d: 0, e: 3 };

Object.keys(obj).forEach(key => {
  if (obj[key] === 0) {
    obj[key] = '-';
  }
});

console.log(obj); // { a: 1, b: '-', c: 2, d: '-', e: 3 }

적용 예시)

const load = (e) => {
  fetch(`http://openAPI.seoul.go.kr:8088/${API_KEY}/json/RealtimeCityAir/1/25/`)
    .then((res) => {
      res.json().then((res2) => {
        // 변수 설정
        const table = document.querySelector("table");
        const tbody = table.querySelector("tbody");
        const rows = tbody.querySelectorAll("tr");
        const numRows = rows?.length;
        const button = document.querySelector("button");
        const dataArray = res2.RealtimeCityAir.row;

        if (numRows < 25) {
          for (let i = 0; i < res2.RealtimeCityAir.list_total_count; i++) {
            // 0으로 표기된 데이터 -로 바꾸기
            for (let value in dataArray) {
              if (dataArray[value] === 0) {
                dataArray[value] = "-";
              }
            }
            tbody.innerHTML += `
              <tr>
                <td>${dataArray[i].MSRRGN_NM}</td>
                <td>${dataArray[i].MSRSTE_NM}</td>
                <td>${dataArray[i].PM10}</td>
                <td>${dataArray[i].PM25}</td>
                <td>${dataArray[i].O3}</td>
                <td>${dataArray[i].SO2}</td>
                <td class = 'rating'>${dataArray[i].IDEX_NM}</td>
                <td>${dataArray[i].IDEX_MVL}</td>
              </tr>
            `;
          button.innerHTML = "데이터 삭제하기";
        } else {
          button.innerHTML = "데이터 불러오기";
          tbody.innerHTML = "";
        }
      });
    })
    .catch((error) => {
      alert("데이터를 가져오는데 실패했습니다.");
    });
};