JSON (JavaScript Object Notation) 사용법 👍
- 📕 Programing/HTML-CSS
- 2020. 12. 3. 13:38
JSON (JavaScript Object Notation) 사용법
- stringify : Javascript 객체를 텍스트로 변환할 때 사용
- parse : 텍스트를 객체로 바꾸는 작업
1. Object to JSON (stringify)
let json = JSON.stringify(true);
console.log(json); // true
// 배열 -> json
json = JSON.stringify(['apple', 'banana']);
console.log(json); // ["apple","banana"]
//객체 선언
const rabbit = {
name : 'tori',
color : 'white',
size : null,
birthDate : new Date(),
symbol : Symbol('id'), // 자체 특별한 데이터도 포함되지 않는다..
jump: () => { // 함수는 제외된다.
console.log('${name} can jump~');
}
};
json = JSON.stringify(rabbit);
console.log(json);
console.log(rabbit);
- 결과를 보면 JSON으로 변화되면서 birthDate 같은 경우는 원래는 Date형인데 String형으로 변환된 것을 볼 수 있다.
- 그리고 Symbol형, 함수는 JSON으로 변환될때 제외된다.
원하는 프로퍼티만 json으로 변경
//원하는 프로퍼티만 json으로 변환
json = JSON.stringify(rabbit,['name', 'color']);
console.log(json); // {"name":"tori","color":"white"]
2. JSON to Object (parse)
//객체 선언
const rabbit = {
name : 'tori',
color : 'white',
size : null,
birthDate : new Date(),
symbol : Symbol('id'), // 자체 특별한 데이터도 포함되지 않는다..
jump: () => { // 함수는 제외된다.
console.log('${name} can jump~');
}
};
let json = JSON.stringify(rabbit);
console.log(json);
// 객체로 변환
const obj = JSON.parse(json);
console.log(obj); // {name: "tori", color: "white", size: null, birthDate: "2020-12-03T04:27:38.163Z"}
console.log(obj.name); // tori
console.log(obj.jump); // undefined
parse 시 세밀한 통제
//세밀하게 통제
const obj2 = JSON.parse(json, (key, value) => {
console.log('key : ' + key); // 객체의 key값 출력
});
3. 예제
let myObj = {'name' : '홍길동', 'age': 35, 'email':'kyhslam@naver.com'};
console.log('myObj :: ', myObj);
console.log('----');
let strJson = JSON.stringify(myObj); // 객체 -> JSON으로 변환
console.log(strJson);
console.log('=====');
newObj = JSON.parse(strJson); // JSON -> 객체로 변환
console.log(newObj);
'📕 Programing > HTML-CSS' 카테고리의 다른 글
[Javascript] Promise 란? (0) | 2021.02.08 |
---|---|
[VS Code] 원하는 서버 브라우저 설정 (0) | 2021.02.08 |
배열(Array) 정의 및 사용법 (0) | 2020.12.03 |
콜백함수(CallBack) (0) | 2020.12.02 |
객체(Object) 사용법 (0) | 2020.12.02 |