「tip」 csv 공공데이터 파일을 json파일로 변환하기

1] csv파일을 json으로 변환한다.

- 정부기관에서 제공하는 csv(공공데이터)파일에서 파일이 깨지는 현상이 간혹 발생한다. 그 이유는 utf-8로 인코딩이 되지 않았기 때문이다, 만일 csv파일이 깨진다면, 당황하지 않고 엑셀에서 utf-8방식으로 다시 저장한다.(export)

2] '객체-객체'의 json파일과 달리 csv파일은 '배열-객체'형태이며, 배열메서드를 적극적으로 활용할 수 있다.

3] json파일은 자바스크립트 객체로 변경 후(json.parse()), 겉의 중괄호를 배열로 변환한다.

(배열이 객체보다 검색속도가 유리)

4] 아래에는 현재 console.log로 표시되는데, 여기서 행과 열의 개수를 얻은 후에 차트로 변경하는 웹앱이 필요하다.

5] tabulator와 같은 차트 라이브러리에 변환된 json데이터를 사용한다.

http://tabulator.info/docs/4.7/quickstart

Tabulator - Interactive JavaScript Tables

Create interactive data tables in seconds with Tabulator. A lightweight, fully featured JavaScript table generation library.

tabulator.info

Code Tip

//csv-json변환코드

<input id="fileUpload" type="file"/>
<div id="content-result">&nbsp;</div>

<script>        
  //변수선언
  const fileUpload = document.getElementById("fileUpload");
  const resultContent = document.getElementById('content-result');
  
  //파일이벤트 실행
  fileUpload.addEventListener('change',Upload)
  
  //업로드 함수
  function Upload() {
      console.log(fileUpload.files);
      
            let regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/; //csv파일 확인, 반드시 영어제목으로
            if (regex.test(fileUpload.value.toLowerCase())) {
                if (typeof (FileReader) != "undefined") {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        console.log("Raw File");
                        console.log(e.target.result);
                        
                        let lines=e.target.result.split('\r');
                        for(let i = 0; i<lines.length; i++){
                        lines[i] = lines[i].replace(/\s/,'')//빈 공간 삭제하기
                        }
                        let result = [];
                        let headers=lines[0].split(",");

                        for(let i=1;i<lines.length;i++){
                            let obj = {};
                            let currentline=lines[i].split(",");

                            for(let j=0;j<headers.length;j++){
                                obj[headers[j]] = currentline[j];
                            }
                            result.push(obj);
                        }

                        //return result; //JavaScript 객체반환
                        console.log("After JSON Conversion");
                
                        console.log(JSON.stringify(result));
						resultContent.innerHTML += JSON.stringify(result)
                        return JSON.stringify(result); //JSON
                    }
                    reader.readAsText(fileUpload.files[0]);
                } else {
                    alert("This browser does not support HTML5.");
                }
            } else {
                alert("Please upload a valid CSV file.");
            }
        }
    </script>

공공데이터에 직접 접속한 뒤, 아래 데이터를 다운받아보자.

gumTesti.csv

0.00MB