JavaScript - JSON String ↔ JSON Object

JSON.parse() [JSON String → JSON Object]

• JSON 문자열을 객체로 변경할 때는 JSON.parse() 함수를 사용

JSON.parse(text[, reviver])

• text (필수입력)
  • 객체로 변환할 JSON 문자열
• reviver (선택입력)
  • JSON 문자열을 객체로 변환하여 리턴하기 전에, 값을 변형시키기 위한 함수

 

• 예제 1 (reviver 미 사용)

const json = `{"id": "kim","age": 24}`;

const obj = JSON.parse(json);
console.log(obj.id);  // 출력 값: "kim"

• 예제 2 (reviver 사용)

// 키와 값을 이용해 변환
const function_json = (key, value) => {
  if (key === 'id') {
    return 'lee';
  } else {
    return value;
  }
}

const json = `{"id": "kim","age": 24}`;

const obj = JSON.parse(json, function_json);
console.log(obj.id);  // 출력 값: "lee"

 

JSON.stringify() [JSON Object → JSON String]

• JSON 객체를 문자열로 변경할 때는 JSON.stringify() 함수를 사용

JSON.stringify(value[, replacer[, space]])

• value (필수)
  • JSON 문자열로 변환할 값 또는 객체
• replacer (선택)
  • JSON 변경 규칙을 정의 할 함수 또는 JSON에 포함 될 프로퍼티(속성)을 가지는 배열
• space (선택)
  • 들여쓰기 공백 갯수 또는 문자열

 

• 예제 1 (배열안에 있는 undefined, Symbol, function은 null로 변환해서 나옴[값은 무시됨])

const obj = {
  name: 'kim',
  age: 24,
  test: undefined,
  func: function() {},
  arr: [undefined, function() {}]
};

const json = JSON.stringify(obj);
console.log(json);  // 출력 값: {"name":"kim","age":24,"arr":[null,null]}

• 예시 2 (replacer 사용)

function replacer(key, value) {
  if(key === 'second') {
    return undefined;
  }else {
    return value;
  }
}

const obj = {
  name: 'kim',
  age: 24,
  first: 'youtube',
  second: 'cooking',
  habit: {
    first: 'youtube',
    second: 'cooking'
  }
};

const json_1 = JSON.stringify(obj, ['name', 'age']);
console.log(json_1);  // 출력 값: {"name":"kim","age":24}

const json_2 = JSON.stringify(obj, replacer);
// 출력 값: {"name":"kim","age":24,"first":"youtube","habit":{"first":"youtube","second":null}}
console.log(json_2);

• 예시 3 (space 사용)

const obj = {
  name: 'kim',
  age: 24,
  first: 'youtube',
  second: 'cooking',
};

const json_1 = JSON.stringify(obj, null, 2);
console.log(json_1);
// 출력 값
{
  "name": "kim",
  "age": 24
}

const json_2 = JSON.stringify(obj, null, '**');
console.log(json_2);
// 출력 값
{
**"name": "kim",
**"age": 24
}

 

참고 링크 1: https://hianna.tistory.com/457

[Javascript] JSON 문자열을 객체로 변경하기

참고 링크 2: https://hianna.tistory.com/456

[Javascript] 객체를 JSON으로 변환하기

참고 링크 3: https://shlee1990.tistory.com/769

[Java Script] 자바스크립트 JSON 문자열에 대한 다양한 처리 방법