제이슨 JSON 파일 작성 방법

웹브라우저나 프로그램으로 파일에 있는 Data를 읽어서 처리하는 로직을 만들 때 가장 안정적이고 효율적인 방법이 제이슨 JSON (JavaScript Object Notation) 파일로 처리하는 방법이다.

 

1. 파일 작성

 

데이터의 종류에 따라 많은 구성이 가능하지만 필자가 주로 사용하는 방법을 소개하고자 한다.

 

{ "book": [
{"cv": "1", "hangul": "무궁화 꽃이 피었습니다."},
{"cv": "2", "hangul": "산에 들에 진달래 피내"},
{"cv": "3", "hangul": "나리 나리 개나리"}
]}

 

text 에디터를 열어서 처음을 "{" 로 시작하고 끝을 "}"로 닫는다.

 

데이터 묶음의 명을 쌍따옴표와 콜론으로 표현한다. "book":

 

데이터 에레이의 시작과 끝을 [ ] 로 표시한다.

 

개별 Data는 처음을 "{" 로 시작하고 끝을 "}"로 구성하고 다음 데이터는 컴머로 구분한다.

 

Data Entity와 Value는 "cv": "1" 처럼 표시하고 다음 Data Entity와 Value는 컴머로 구분한다.

 

여러가지 Data type을 사용할 수 있지만 필자는 string type으로 처리하는 것을 선호한다. 파이썬으로 에디터 프로그램을 만들거나 시간이 없다면 엑셀 텍스트 함수를 이용하여 제이슨 텍스트 파일을 생성하면 된다.

 

 

---------------------

 

2. HTML로 JSON 파일 불러 들여서 Array로 저장하는 방법

 

2.1 form을 사용하여 파일을 선택함

 

<form>

    <div>

        <label for="input_file">파일을 추가해주세요.</label>

        <input type="file" id="input_file">

    </div>

    <div>

        <button onclick="test(event)">summit</button>

    </div>

</form>

 

2.2 자바스크립트로 파일 읽어서 파싱 함수 부름

 

function test(event) {

    event.preventDefault(); //submit 할때 새로고침 되는것을 방지

    let fileObject = document.getElementById("input_file");

    let fileName = fileObject.files[0];

    let fr = new FileReader();

    fr.readAsText(fileName, "utf-8");

    fr.onload = () => {

        parseText(fr.result);

    }

}

 

2.3 파일 열어서 데이터를 읽어온 후 배열로 구성함

 

arr = [".", "."];

temp = "";

function parseText(text) {

    //console.log(text)

    data = JSON.parse(text);

    let temp = data.book;

    let max = temp.length;

    //console.log(max);

    for (i = 0; i < max; i += 1) {

       

        arr.push(data.book[i].cv);

        arr.push(data.book[i].hangul);

    }  

}

 

arr 어레이에는 아래와 같은 형태로 Data가 배열되게 된다. 

 

arr = [".", ".", "1", "무궁화 꽃이 피었습니다.", "2", "산에 들에 진달래 피내", "3",  "나리 나리 개나리" ]