손쉽게 Table의 데이터를 객체 리스트화 해보자. (자바스크립트)

프론트엔드 개발을 하다보면 DB로부터 데이터를 가져와서

그 데이터를 테이블에 출력을 하고

수정한 데이터를 수정 전의 데이터와 비교해서

다시 DB에 저장하는 일이 많은 편이다.

 

그러므로

새로운 데이터의 추가 뿐만아니라, 수정이 이루어진 테이블

데이터를 어떻게 다시 DB데이터로 저장하기 위한 형태로

변화시킬지에 대해서는 고민이 많았다.

서버로부터 데이터를 전달 받을 때
리스트의 객체형태로 전달 받기 때문에
화면단에서도 서버로 데이터를 전달 할때 리스트의 객체형태로 만드는 것이
자바스크립트에서 손쉽게 실현이 가능할까가 궁금했다.

 

 

그러던 차에, 큰 마음을 먹고

기존의 낡은 방식에서 벗어나서 자바스크립트가 제공하는

API를 활용해보기로 했다. (기존에 있던 소스코드의 내용들이 너무 원초적인 내용이었으므로)

const tbody = document.getElementById("tbody");

// 테이블의 각 행을 배열로 변환
const rows = Array.from(tbody.rows);

// 각 행을 배열로 변환하고, 필요한 데이터 객체 형태로 가공
const tableData = rows.map(row => {
    const cells = Array.from(row.cells);
    return {
        name: cells[0].textContent,
        birthdate: cells[1].textContent,
        age: cells[2].textContent,
        hobby: cells[3].textContent,
        phoneNumber: cells[4].textContent
    };
});

 

설명:

1.  Array.from(tbody.rows):  tbody.rows는 HTMLCollection 형식이라서

배열처럼 다룰 수 없으므로 Array.from()을 사용해 배열로 변환한다.

 

2. rows.map(row => {...}):  각 행(row)을 순회하면서 해당 행의 셀(td 요소들)을 배열로 변환한다.

 

3. cells[0].textContent 등:  각 셀의 텍스트 내용을 가져와서 객체 형태로 변환한다.

 

결과:

[
    {
        name: 'Alice',
        birthdate: '1990-05-01',
        age: '34',
        hobby: 'Reading',
        phoneNumber: '010-1234-5678'
    },
    {
        name: 'Bob',
        birthdate: '1992-07-11',
        age: '32',
        hobby: 'Gaming',
        phoneNumber: '010-2345-6789'
    }
]