JSON 활용하기

JSON

값이나 객체를 나타내주는 범용 포맷, 데이터 교환 목적으로 사용하는 경우가 많다.

JSON으로 인코딩된 객체의 예

let student = {
  name: 'John',
  age: 30,
  isAdmin: false,
  courses: ['html', 'css', 'js'],
  wife: null
};

let json = JSON.stringify(student);

{
  "name": "John",
  "age": 30,
  "isAdmin": false,
  "courses": ["html", "css", "js"],
  "wife": null
}
키, 문자열 값은 반드시 큰 따옴표 ""를 감싸야됨 작은따옴표, 백틱은 에러.

1. JSON.stringify

일반 자바스크립트 객체를 JSON문자열로 변경해줌

간단예시
let meetup = {
  title: "Conference",
  room: {
    number: 23,
    participants: ["john", "ann"]
  }
};

alert( JSON.stringify(meetup) );
/* 객체 전체가 문자열로 변환되었습니다.
{
  "title":"Conference",
  "room":{"number":23,"participants":["john","ann"]},
}
*/

단, 순환참조는 변환불가!

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: ["john", "ann"]
};

meetup.place = room;       // meetup은 room을 참조합니다.
room.occupiedBy = meetup; // room은 meetup을 참조합니다.

JSON.stringify(meetup); // Error: Converting circular structure to JSON

2. replacer

순환참조 또는 원하는 프로퍼티만 JSON으로 변경할때 사용하는 옵션

let json = JSON.stringify(value[, replacer, space])

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: room // meetup은 room을 참조합니다
};

room.occupiedBy = meetup; // room은 meetup을 참조합니다

JSON.stringify(meetup, function replacer(key, value) {
  console.log(`${key}: ${value}`);
  return (key == 'occupiedBy') ? undefined : value;
});  <--- 추가하고 싶지않은 프로퍼티는 undefined를 넘긴다 

/* replacer 함수에서 처리하는 키:값 쌍 목록
:             [object Object]
title:        Conference
participants: [object Object],[object Object]
0:            [object Object]
name:         John
1:            [object Object]
name:         Alice
place:        [object Object]
number:       23
*/

3. JSON.parse

JSON.parse를 사용하면 JSON으로 인코딩된 객체를 다시 일반 객체로 디코딩

// 문자열로 변환된 배열
let numbers = "[0, 1, 2, 3]";

numbers = JSON.parse(numbers);

alert( numbers[1] ); // 1


// 중첩 객체도 가능
let userData = '{ "name": "John", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }';

let user = JSON.parse(userData);

alert( user.friends[1] ); // 1