JSON stringify와 parse 사용법

miiin_sseong·2022년 6월 13일
0

JSON이란?

  • 클라이언트와 서버간의 HTTP 통신을 위한 텍스트 데이터 포맷입니다.
    자바스크립트에 종속되지 않는 언어 독힙형 데이터 포맷입니다.
  • JSON.stringify 객체를 JSON으로 바꿔줍니다.
  • JSON.parse JSON을 객체로 바꿔줍니다.

JSON 표기 방식

{
  "name" : "song",
  "age": 27,
  "alive": true,
  "hobby": ["traveling","baseball"]
}
  • JSON의 키는 반드시 큰따옴표로 묶어야한다.
  • 값은 객체 리터럴과 같은 표기법을 그대로 사용할 수 있다.
  • 문자열은 반시 큰따옴표로 묶어야한다.

JSON.stringify

  • 객체를 JSON 포맷의 문자열로 변환합니다.
  • 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해하 하는데 이를 직렬화라고 합니다.
const obj = {
  name: "song",
  age: 27,
  alive: true,
  hobby: ["traveling", "baseball"],
};

// 객체를 JSON 포맷의 문자열로 변환한다.
const json = JSON.stringify(obj);
console.log(typeof json, json);
// string ["name":"song","age":27,"alive":true,"hobby":["traveling", "baseball"]]

//객체를 JSON 포맷의 문자열로 변환하면서 들여쓰기 한다.
const prettyJson = JSON.stringify(obj, null, 2);
console.log(typeof prettyJson, prettyJson);
/* 
string{
    "name": "song",
    "age": 27,
    "alive": true,
    "hobby": [
        "traveling",
        "baseball"
    ]
}
*/

//replacer 함수. 값의 타입이 Number이면 필터링되어 반환되지 않는다.
function filter(key, value) {
  // undefined: 반환되지 않는다.
  return typeof value === "number" ? undefined : value;
}

// JSON.stringify 메서드에 두 번째 인수로 replacer 함수로 전달됩니다.
const strFilterObject = JSON.stringify(obj, filter, 2);
console.log(typeof strFilterObject, strFilterObject);
/* 
string {
    "name" : "song",
    "alive" : true,
    "hobby": [
        "traveling",
        "baseball"
    ]
}
*/
  • JSON.stringify메서드는 객체뿐만 아니라 배열에서도 JSON 포맷의 문자열로 변환합니다.
const todos = [
  { id: 1, content: "HTML", completed: true },
  { id: 2, content: "CSS", completed: true },
  { id: 3, content: "JAVASCRIPT", completed: true },
];

// 배열을 JSON 포맷의 문자열로 변환합니다.
const json = JSON.stringify(todos, null, 2);
console.log(typeof json, json);
/* 
string [
    {
        "id":1,
        "content": "HTML",
        "completed": true
    },
    {
        "id":2,
        "content": "CSS",
        "completed": true
    },
    {
        "id":3,
        "content": "JAVASCRIPT",
        "completed": true
    },
]
*/

JSON.parse

  • JSON 포맷의 문자열을 객체로 변환합니다.
  • 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열입니다.
  • 문자열을 객체로서 사용하려면 JSON 포맷의 문자열을 객체화해야하는데 역직렬화라고 합니다.
const obj = {
  name: "song",
  age: 27,
  alive: true,
  hobby: ["traveling", "baseball"],
};
// 객체를 JSON 포맷의 문자열로 변환합니다.
const json = JSON.stringify(obj);

// JSON 포맷의 문자열을 객체로 변환합니다.
const parsed = JSON.parse(json);
console.log(typeof parsed, parsed);
// object {name: 'song',age:27, alive: true,hobby:['traveling','baseball']}
profile
Github잔디를 채우기 위해 Github에서 적는중

0개의 댓글