[JavaScript] JSON파일 다루기

음.. 일단 신기했던게..

게시판 이름을 'JavaScript'라고 못한다.. 보안관련되서 막아놓은건가.. 무튼 안된다... 크흠..

무튼 그렇다....

 

 

1. JSON

- 위키백과사전

JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍( attribute–value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다.

 

JSON은 이런 것입니다.  이미 JSON을 알고 있다는 가정으로 바로 몇가지 예를 통해 사용법을 알아보겠습니다.

우선 JSON String의 기본 형식이다.

var data = `[
    [
    {"id":1, "name":"홍길동"}, 
    {"id":2, "name":"장길산"}, 
    {"id":3, "name":"조세호"}, 
    {"id":4, "name":"정관장"}
    ],
    [
        {"id":5, "name":"김철수"}, 
        {"id":6, "name":"이영희"}, 
        {"id":7, "name":"나봉선"}, 
        {"id":8, "name":"도봉순"}
    ]
]`;

JSON의 기본형식은 스트링입니다. String으로 통신하는 JSON을 알맞은 Object로 만들어서 사용하는 것이죠

 

1) JSON.parse()

.JSONstring을 알맞은 Object로 바꿔주는게 바로 JSON.parse() 입니다.

 

var User = JSON.parse(data);

console.log(User.length);
console.log(User);

// 2
// [
//   [
//     { id: 1, name: '홍길동' },
//     { id: 2, name: '장길산' },
//     { id: 3, name: '조세호' },
//     { id: 4, name: '정관장' }
//   ],
//   [
//     { id: 5, name: '김철수' },
//     { id: 6, name: '이영희' },
//     { id: 7, name: '나봉선' },
//     { id: 8, name: '도봉순' }
//   ]
// ]

이 구조는 배열 안에 2개의 배열이 더 있고 그 구조는 key-value형식의 Object가 있는 형식으로 되어있습니다.

 

이렇게 만든 JSON형식은 다음과 같이 사용할 수 있습니다.

User.forEach(function(v, out_i){
    var innerArray = v;
    innerArray.forEach(function(v, in_i){
        console.log(`배열 번호-(외부 -> ${out_i}, 내부 -> ${in_i} : id : ${v.id}, name : ${v.name}`);
    });
});

//	배열 번호-(외부 -> 0, 내부 -> 0 : id : 1, name : 홍길동
//	배열 번호-(외부 -> 0, 내부 -> 1 : id : 2, name : 장길산
//	배열 번호-(외부 -> 0, 내부 -> 2 : id : 3, name : 조세호
//	배열 번호-(외부 -> 0, 내부 -> 3 : id : 4, name : 정관장
//	배열 번호-(외부 -> 1, 내부 -> 0 : id : 5, name : 김철수
//	배열 번호-(외부 -> 1, 내부 -> 1 : id : 6, name : 이영희
//	배열 번호-(외부 -> 1, 내부 -> 2 : id : 7, name : 나봉선
//	배열 번호-(외부 -> 1, 내부 -> 3 : id : 8, name : 도봉순

 

2) JSON.stringify()

또한 JSON.stringify(JsonObject)를 통해 다음과 같이 원래 String 형태로 만들 수 있죠

var toStr = JSON.stringify(User);

console.log(toStr);
//[[{"id":1,"name":"홍길동"},{"id":2,"name":"장길산"},{"id":3,"name":"조세호"},{"id":4,"name":"정관장"}],[{"id":5,"name":"김철수"},{"id":6,"name":"이영희"},{"id":7,"name":"나 
봉선"},{"id":8,"name":"도봉순"}]]

 

3) 일반 객체(Date)에 대한 JSON

다음은 시간객체를 하나 만들어 JSON형식으로 바꾸는 코드입니다.

ar date = new Date();
var dateString = date.toJSON();

console.log();
console.log();
console.log(`date : ${date}`);
console.log(`dateString : ${dateString}`)

// date : Wed May 12 2021 23:58:33 GMT+0900 (대한민국 표준시)
// dateString : 2021-05-12T14:58:33.796Z

json은 이와같이 꼭 배열이나 key-value형식의 Object가 아니어도 string의 형식으로 변환 할 수 있습니다.

 

4) Array<->JSON

물론 배열의 형식을 JSON으로 바꿨다가 다시 원래 Object로 변환하는 것 또한 가능합니다.

var arr = Array.from({length:10}, (_,i)=>i*i);
console.log();
console.log("-- arr---");
console.log(arr)
var arrJson = JSON.stringify(arr);
console.log();
console.log("-- arrJson---");
console.log(arrJson);
var arr2 = JSON.parse(arrJson);
console.log();
console.log("-- arr2---");
console.log(arr2);
console.log();
// -- arr---
// [
//    0,  1,  4,  9, 16,
//   25, 36, 49, 64, 81
// ]

// -- arrJson---
// [0,1,4,9,16,25,36,49,64,81]

// -- arr2---
// [
//    0,  1,  4,  9, 16,
//   25, 36, 49, 64, 81
// ]

 

 

5) 더 복잡한 형태

실제 Object는 {key: {key:value}}와 같은 형식으로 되어 있는 경우도 있겠죠? 이런점 또한 JSON을 통해 표현 가능합니다.

var human = {
    'name':'홍길동',
    'body': {
      height: 173,
      weight: 66
    },
    'age': 23
  };

var humanJson = JSON.stringify(human);
console.log();
console.log(human);
console.log(humanJson);

// { name: '홍길동', body: { height: 173, weight: 66 }, age: 23 }
// {"name":"홍길동","body":{"height":173,"weight":66},"age":23}