JSON

JSON이란?

JSON은 JavaScript Object Notation의 약자로, 브라우저와 서버 사이로 오고가는 데이터 형식이다.

사용법

JSON.stringify(vale, replacer, space)

value: JSON 문자열로 변환할 값

replacer: 함수나 객체들로 조합된 배열을 사용할 수 있다. 제공되지 않거나 null이면 객체의 모든 속성들이 JSON 문자열 결과에 포함된다.

space: 가독성을 목적으로 JSON 문자열 출력할 때에 공백을 삽입하는데 사용한다.

value

let parsing = {
  num: 1213,
  red:"#FF0000",
  green: "#00FF00",
  blue: "#0033FF",
  }

parsing이라는 변수 안에 객체를 담고 JSON.stringfy()를 한번 적용시켜보자.

const a = JSON.stringify(parsing)

a//"{"num":1213,"red":"#FF0000","green":"#00FF00","blue":"#0033FF"}"

위 코드 처럼 데이터타입이 문자열(string)이 된다.

value의 데이터 타입이 number이나 boolean일 경우, 그대로 가져오고, 나머지는 문자열로 바꾸주는 특성을 가지고있다.

Replace

const filtering = (key, value) => {
 if(typeof value === 'number'){
  	return undefined; 
  }
  return value;
}

const b = JSON.stringify(parsing, filtering)
const b2 = JSON.stringㅑfy(parsing, ['red', 'blue'])

b//"{"red":"#FF0000","green":"#00FF00","blue":"#0033FF"}"

b2//"{"red":"#FF0000","blue":"#0033FF"}"

replace는 함수로 특정 값만 걸러서 받을 수 있고, 배열로 작성했을 경우 원하는 키를 배열에 담으면 그 값만 가져올 수 있다.

Space

let c = JSON.stringify(parsing, null, 1)

c//"{
 "num": 1213,
 "red": "#FF0000",
 "green": "#00FF00",
 "blue": "#0033FF"
}"

space에 타입이 number일 경우 숫자만큼 각 요소에 공백을 삽입한다. 만약 문자열을 입력받으면 어떻게 될까?

let c = JSON.stringify(parsing, null, 'string')

c//"{
string"num": 1213,
string"red": "#FF0000",
string"green": "#00FF00",
string"blue": "#0033FF"
}"

JSON.parse

JSON 문자열의 구문을 분석한다음, JavaScript의 객체나 값을 생성한다.

사용법

JSON.parse(text, reviver)

text: 문자열(string) 객체를 JSON 객체로 반환한다.

reviver: 함수를 이용하여 결과값을 바꿀 수 있다.

위에 stringify()를 한 결과들을 parse를 해보자

const parseA = JSON.parse(a)

parseA // {num: 1213, red: "#FF0000", green: "#00FF00", blue: "#0033FF"}