(참조글 : https://steemit.com/kr-dev/@cheonmr/json-stringify )
[ 개념 ]
JavaScript Object Notation의 약어로
데이터를 저장하거나 전송할 때 많이 사용되는 경량 Data 교환 형식
- key-value 형식의 쌍을 갖는다
- 최근에는 XML을 대체하여 데이터 전송에 많이 사용
- null / number / string / array / object / boolean 형 사용 가능
- 문자열 or 프로퍼티의 이름 작성시 큰따옴표 " " 만 사용
[ 생성 & 사용 ]
/* 생성 */ const result = { "name" : "neity16", // "name"이 key, "neity16"이 value "email" : "neity16@daum.net", "age" : 25 } /* 사용 */ console.log(result.name); // neity16 console.log(result.age); // 25
[ 요소 추가 & 삭제 ]
/* 객체.key = value로 추가 phone 요소 추가! */ result.phone = '010-1234-5678'; console.log(result); /* { "name" : "neity16", "email" : "neity16@daum.net", "age" : 25, "phone" : "010-1234-5678"} */ /* delete 객제.key로 삭제 name 요소 삭제! */ delete result.name; console.log(result); /* { "email" : "neity16@daum.net", "age" : 25, "phone" : "010-1234-5678"} */
[ 개념 ]
Javascript값 —> JSON 문자열로 변환
[ 원형 & 사용 ]
JSON.stringify(value, replacer, space)
- value (필수) : JSON 문자열로 변환할 값 // 배열, 객체, 숫자, 문자 등등
var object = {name: 'kjw', nickname: '정욱', age: 25}; var useJson = JSON.stringify(object); console.log(useJson); // {"name":"kjw","nickname":"정욱","age":25}
- replacer(선택) : 필터링을 해주는 역할 // 함수, 배열이 온다
/* 함수 일 때 */ function replacer(key, value){ if(typeof value === 'string'){ return undefined; } return value; } var object = {name: 'kjw', nickname: '정욱', age: 25}; var useJson = JSON.stringify(object, replacer); // replacer에서 typeof가 string인 요소들은 없어진다. console.log(useJson) // {"age:25} -------------------------------------------------------------- /* 배열 일 때 */ var object = {name: 'kjw', nickname: '정욱', age: 25}; var useJson = JSON.stringify(object, ['name', 'age']); // replacer에 있는 배열에 해당하는 요소만 선택된다. console.log(useJson); // {"name":"kjw","age":25}
- space(선택) : 공백을 삽입하는 역할(가독성 목적) // string, number 등
var object = {name: 'kjw', nickname: '정욱', age: 25}; var useJson = JSON.stringify(object, null, 5); console.log(useJson); /* { "name": "kjw", // 각 요소 앞에 공백 5개가 추가되어 가독성 증가! "age": 25 } */
[ 개념 ]
문자열 —> Javascript 객체로 변환
(JSON.stringify() 와 반대)
[ 원형 & 사용 ]
JSON.parse(text[, reviver])
- text : JSON으로 변환할 문자열
console.log(useJson); /* { "name": "kjw", // 각 요소 앞에 공백 5개가 추가되어 가독성 증가! "age": 25 } */ var goJson = JSON.parse(useJson); console.log(goJson); // {name:"kjw", age:25}
* reviver : 함수라면, 반환 결과를 반환하기 전에 이 인수를 전달해 변형