JSON (JavaScript Object Notation) 사용법 👍

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

댓글

Designed by JB FACTORY