[자바스크립트] CSV to JSON 변환 출력 방법+샘플예제코드(node.js 파일 처리 포함)

| 자바스크립트로 CSV를 JSON으로 변환하는 방법

CSV는 Comma Seperated Values의 약자로, 콤마( , )로 구분된 문자열을 말합니다.

행의 항목(컬럼)들은 콤마로 구분되며, 각 행은 줄바꿈으로 구분됩니다.

 

따라서 CSV문자열을 JSON으로 변환하는 방식은 아래와 같습니다.

1) 줄바꿈(\r\n)으로 각 행을 구분해 주고,

2) 콤마( , )로 각 컬럼을 구분해 주고,

3) 머리행에서 제목을 추출, 내용행에서 데이터를 추출하고,

4) 각 행을 객체로 만들어 배열에 담아준다

 

바로 사용할 수 있는 함수로 만들어 두었으며, 사용 방법도 샘플 예제 코드로 작성해 보았습니다.

 

JQuery나 별도 라이브러리/모듈 없이 오직 자바스크립트만 사용하므로,

브라우저(browser), node.js 등 모든 자바스크립트 환경에서 작동합니다.

 

"아래 만들어둔 csvToJSON() 함수에 CSV문자열 넣어서 호출하면 됩니다."

(CSV파일 읽어서, JSON파일 생성하는 방법은 샘플 예제코드 참고)

---

# CSV to JSON 함수 (CSV to JSON Converter)

: CSV 형식의 문자열(string)을 읽어, JSON으로 변환하는 함수입니다.

: csvToJSON함수를 호출할 때, 매개변수로 string타입의 CSV문자열을 넣어주시면, JSON형태의 배열이 반환됩니다.

function csvToJSON(csv_string){

    // 1. 문자열을 줄바꿈으로 구분 => 배열에 저장
    const rows = csv_string.split("\r\n");
    
    // 줄바꿈을 \n으로만 구분해야하는 경우, 아래 코드 사용
    // const rows = csv_string.split("\n");
  

    // 2. 빈 배열 생성: CSV의 각 행을 담을 JSON 객체임
    const jsonArray = [];

  
    // 3. 제목 행 추출 후, 콤마로 구분 => 배열에 저장
    const header = rows[0].split(",");

  
    // 4. 내용 행 전체를 객체로 만들어, jsonArray에 담기
    for(let i = 1; i < rows.length; i++){
  
        // 빈 객체 생성: 각 내용 행을 객체로 만들어 담아둘 객체임
        let obj = {};

        // 각 내용 행을 콤마로 구분
        let row = rows[i].split(",");
  
        // 각 내용행을 {제목1:내용1, 제목2:내용2, ...} 형태의 객체로 생성
        for(let j=0; j < header.length; j++){
            obj[header[j]] = row[j];
        }
  
        // 각 내용 행의 객체를 jsonArray배열에 담기
        jsonArray.push(obj);
  
    }
    
    // 5. 완성된 JSON 객체 배열 반환
    return jsonArray;

    // 문자열 형태의 JSON으로 반환할 경우, 아래 코드 사용
    // return JSON.stringify(jsonArray);
}

 

코드에 대한 상세한 설명은 주석으로 추가해두었습니다.

 

혹시나 해서, 실제 사용하는 방법을 샘플 코드로 작성해 보았습니다.

(당연히 위의 함수가 선언된 상태에서 사용해야 합니다.)

 

# CSV to JSON 샘플 예제 코드

1. CSV문자열(string)을 JSON으로 변환하는 예제 코드

// 1. CSV 문자열 취득
const string_csv = `제품명,가격,갯수\r\n대나무빨대,1500,10\r\n법랑커피잔,15000,20`;


// 2. csvToSJON(CSV문자열) 함수 호출
const arr_json = csvToJSON(string_csv);


// 3. JSON 변환 결과 확인
console.log(arr_json);

/* 출력결과
  [
    { '제품명': '대나무빨대', '가격': '1500', '갯수': '10' },
    { '제품명': '법랑커피잔', '가격': '15000', '갯수': '20' }
  ]
*/

 

2. CSV파일(file)을 JSON으로 변환하는 예제 코드

node.js 환경에서 CSV파일을 읽어서 JSON으로 변환하는 방법입니다.(파일을 읽을 때, node.js의 fs 모듈 사용)

// 1. node.js의 fs모듈 추출
const fs = require('fs');


// 2. csv파일 읽기
const file_csv = fs.readFileSync('파일경로');


// 3. string으로 변환: fs로 읽은 Buffer를 문자열로 변환합니다.
const string_csv = file_csv.toString();


// 4. csvToJSON(CSV문자열) 함수 호출
const arr_json = csvToJSON(string_csv);

 

3. CSV문자열을 JSON 파일(file)로 생성하는 예제 코드

CSV문자열을 JSON파일로 변환하는 방법입니다.(파일 생성 시, node.js의 fs 모듈 사용)

// 1. node.js의 fs모듈 추출
const fs = require('fs');


// 2. CSV문자열 취득
const string_csv = `제품명,가격,갯수\r\n대나무빨대,1500,10\r\n법랑커피잔,15000,20`;


// 3. JSON으로 변환
const arr_json = csvToJSON(string_csv);


// 4. JSON을 문자열로 변환
const string_json = JSON.stringify(arr_json);


// 5. file.json 파일로 생성
fs.writeFileSync('파일명.json', string_json);

---

CSV to JSON 변환 출력 방법 정리 끝!

 

반대로, JSON to CSV 변환 방법은 아래 글을 참고하시기 바랍니다.

[자바스크립트] JSON to CSV 변환 출력 방법 (+JSON파일 읽기, CSV파일 쓰기 in node.js)

 

CSV 형식의 경우, 내용에 컴마가 들어가 있으면 처리가 좀 불편해져서

개인적으로는 Tab으로 구분된 TSV 파일을 자주 사용하는 편입니다.

 

TSV to JSON 변환 파싱 방법은 아래 글을 참고하시기 바랍니다.

[자바스크립트] TSV to JSON 변환 출력 파싱 방법 + 예제 코드 + node.js 파일 처리