[Javascript] JSON

JSON.stringify

• JSON.stringify : 객체 -> JSON
• JSON.parse  : JSON -> 객체

JSON이란 키와 값 쌍으로 되어있는 데이터 객체를 전달하기 위한 문자 기반의 표준 포맷임.

 

네트워크를 통해 객체를 전송할 때 객체를 JSON형태의 문자열로 바꿔주어야 함.

 

JSON.stringify 메서드는 객체를 JSON 형태로 바꿀 수 있음

let my_info = {
	firstName:'namsu',
    lastName:'park',
    address:'ansan',
    age:27,
    friends:['kim','lee','hong']
}

let my_JSON = JSON.stringify(my_info);

console.log(my_JSON);
console.log(typeof my_JSON);

JSON형태의 문자열이 생성됨.

여기서 '' 로 묶였던 문자열은 "" 로 변경됨.

 

JSON.stringify 가 무시하는 프로퍼티들은 아래와 같음

• 함수 프로퍼티
• 값이 undefined
• 심볼형 프로퍼티

let test_obj = {
	func(){ console.log("test")},
    testVal:undefined,
    [Symbol("name")]:"abc",
    name:"park"
}

let test_json = JSON.stringify(test_obj);

console.log(test_json);

 

무시하는 프로퍼티들을 제외한 name 프로퍼티만 생성된 것을 볼 수 있음

 

JSON.stringify 는 중첩 객체(객체의 프로퍼티 값이 객체)도 생성해 주지만 순환참조(2개의 객체가 값으로 서로를 참조)가 있으면 무시함

let my_obj = {

	name:"park",
    age:25,
    test:{
    	a:'a',
        b:'b'
    }
}

let my_json = JSON.stringify(my_obj);

console.log(my_json);

 

객체값도 이상없이 생성

 

let sub_obj = {
	
    a:'a',
    b:'b'
}

let main_obj = {
	
    sub:sub_obj,
    subTwo:{
    	c:'c',
        d:'d'
    }
}

sub_obj.main = main_obj

let main_json = JSON.stringify(main_obj);

console.log(main_json);

 

main_obj 과 sub_obj이 서로를 참조하므로 json으로 변환 실패

 

replacer와 space

replacer : JSON으로 인코딩 하기 원하는 배열, 혹은 매핑 함수

space : 가독성을 높이기 위해 몇칸을 들여쓰기 할지 설정

 

replacer 와 space 는 JSON.stringify(obj[, replacer, space]) 형태로 사용 ([ ] 안의 전달인자 즉 replacer 와 space는 옵션)

 

replace로 배열을 전달할 때는 배열안에 있는 키만 json으로 인코딩하게 설정할 수 있음

let test = {
	
    a:1,
    b:2,
    c:3,
    d:4
}

//replacer의 전달 인자로 배열 a,b를 전달하므로 test 의 키 a, b만 인코딩 됨
console.log(JSON.stringify(test,["a","b"]))

 

 

replacer를 함수로 매핑하여 원하는 값만 인코딩 할 수 있음

let test= {
    a:1,
    b:2,
    c:3,
    d:4
}

//key가 b, c일경우 undefined 아닐경우 값을 리턴
let re = JSON.stringify(test,function replacer(key,val){
    return ['b','c'].includes(key) ? undefined:val
})

console.log(re)

 

 

space는 space의 숫자만큼 들여쓰기를 사용해 보기좋게 json 인코딩을 할 수 있음

let person = {
	name:"hong",
    age:21,
    friends:["lee","park","jang"]
}

//3칸만큼 들여쓰기
let person_json = JSON.stringify(person,null,3);

console.log(person_json);

 

안의 프로퍼티 뿐만 아니라 프로퍼티 값인 배열도 들여쓰기 된 것을 볼 수 있음

 

toJSON()

toJSON() 함수를 객체 내에 구현하면 원하는 프로퍼티만 json으로 인코딩할 수 있음

let account = {
	
    accountNum:11111124324,
    bank:"KB",
    name:"park",
    password:"abc1234",
    toJSON(){ // password만 빼고 인코딩 원할 시
    	return {
        
            accountNum:this.accountNum,
            bank:this.bank,
            name:this.name
        }
    }
}

console.log(JSON.stringify(account, null, 2));

 

 

JSON.parse

JSON.parse 는 JSON.stringify와 반대로 JSON형태의 문자열을 객체로 변경해줌

 

JSON.parse(str[, reviver]) 형태로 사용할 수 있음

 

JSON.parse 사용시에는 아래와 같은 주의사항이 있음

• 작은따옴표 ('') 를 사용할 수 없음
• 값으로 new 를 사용할 수 없음( ex) new Array() )
• 키는 항상 큰따옴표("")로 감싸줘야 함

JSON.parse의 사용

let json_str = `{
	"name":"park",
    "age":24,
    "job":"programmer",
	"family":["fater","mother","brother"]
}`

let obj = JSON.parse(json_str)

console.log(obj)

 

 

만약 date 타입을 객체로 만들어 주어야 할 경우 reviver을 사용하여 값을 재생성 할 수 있음

let json_str = `{
	"name":"park",
    "age":24,
    "job":"programmer",
	"family":["fater","mother","brother"],
    "bornDate":"1994-12-13T00:01:35.000"
}`

//reviver을 사용해 bornDate의 값을 Date타입으로 변경해 줌
let obj = JSON.parse(json_str,function(key,val){
	return key === "bornDate" ? new Date(val):val
})

console.log(obj)

 

bornDate 가 Date타입으로 변경된 것을 볼 수 있음

 

참조: https://ko.javascript.info/json