10. JSON 개념 정리 와 활용방법
유용한 사이트: JSON
Diff checker: http://www.jsondiff.com/
JSON Beautifier/editor: https://jsonbeautifier.org/
JSON Parser: https://jsonparser.org/
JSON Validator: https://tools.learningcontainer.com/json-validator/
////////////////////////////////////
// JSON
////////////////////////////////////
// JavaScript Object Notation
// 1. Object to JSON
// stringify(obj)
let json = JSON.stringify(true);
console.log(json);
json JSON.stringify(['apple', 'banana']);
console.log(json);
const rabbit = {
name: 'tori',
color: 'white',
size: null,
birthDate: new Date(),
// obejct, Symbol은 JSON에 포함되지 않는다
symbol: Symbol("id"),
jump: () => {
console.log(`${name} can jump!`);
},
}
let json = JSON.stringify(rabbit);
console.log(json);
// name만 JSON으로 변환
json = JSON.stringify(rabbit, ['name']);
console.log(json);
// 세부적으로 설정가능
json = JSON.stringify(rabbit, (key, value) => {
console.log(`key: ${key}, value: ${value}`);
return key === 'name' ? 'ellie' : value;
})
console.log(json)
// 2. JSON to Object
// parse(json)
console.clear();
json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
const obj = JSON.parse(json, (key, value) => {
console.log(`key: ${key}, value: ${value}`);
return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj);
rabbit.jump();
// obj.jump();
console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate());
'Front-end > Javacript' 카테고리의 다른 글
자바스크립트 Tutorial By Ellie (10) (0) | 2021.05.27 |
---|---|
자바스크립트 Tutorial By Ellie (9) (0) | 2021.05.26 |
자바스크립트 Tutorial By Ellie (7) (0) | 2021.05.26 |
자바스크립트 Tutorial By Ellie (6) (0) | 2021.05.26 |
자바스크립트 Tutorial By Ellie (5) (0) | 2021.05.25 |