본문 바로가기

Front-end/Javacript

자바스크립트 Tutorial By Ellie (8)

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());