JSON과 parse(), stringify()

2023-09-25

문제점 😅

이전글 jQuery를 통한 Ajax 사용에서 Ajax 파라미터 중 data를 JSON으로 변환하여 작성했다. JSON에 대해서 짚고 넘어가보자.

해결책 😏

JSON이란 ?

JSON (JavaScript Object Notation)은 경량 데이터 교환 형식으로, JavaScript 객체 리터럴 문법을 따른다. 객체, 배열, 숫자, 문자열, 불리언(Boolean), 널(Null) 등 다양한 데이터를 "Key": "Value" 형식으로 나타낼 수 있다.

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

JSON.parse()

JSON.parse() 함수는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성한다.

 JSON.parse(text[, reviver])

text: JSON으로 변환할 문자열.
reviver: 옵션값으로, 함수라면, 변환 결과를 반환하기 전에 이 인수에 전달해 변형함.

console.log( JSON.parse("{}") ); // {}
console.log( JSON.parse("true") ); // true
console.log( JSON.parse('"foo"') ); // "foo"
console.log( JSON.parse('[1, 5, "false"]') ); // [1, 5, "false"]
console.log( JSON.parse("null") ); // null

// reviver 함수 파라미터 추가.
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, (key, value) => {
                  if (key == "name") {
                        return `Say My Name ${value}`;
                  } else if (key == "birth") {
                        return `My Birth is ${value}`;
                  } else {
                        return value;
                  }
});

console.log(obj);
// {name: 'Say My Name John', birth: 'My Birth is 1986-12-14', city: 'New York'}

JSON.stringify()

JSON.stringify() 함수는 JavaScript 값이나 객체를 JSON 문자열로 변환한다.

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

value: JSON 문자열로 변환할 값.
replacer: 옵션값으로, 함수 또는 배열이 올 수 있으며 필터링 기능.
space: 옵션값으로, JSON 문자열의 가독성을 위해 공백을 삽입하는데 사용.

let myJsonData = {
                  foundation: "Mozilla",
                  model: "box",
                  week: 45,
                  transport: "car",
                  month: 7
                  };

console.log( JSON.stringify(myJsonData) );
// {"foundation":"Mozilla","model":"box","week":45,"transport":"car","month":7}

console.log( JSON.stringify(myJsonData, ["foundation", "month"]) ); 
// {"foundation":"Mozilla","month":7}

console.log( JSON.stringify(myJsonData, ["week", "transport"], 3) );
/*
{
   "week": 45,
   "transport": "car"
}
*/

마무리 😎

매개변수에 대해서 상세한 내용은 반드시 아래 mozilla 도큐먼트를 읽어보자.

참고문헌 📝

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON
https://www.daleseo.com/js-json/
https://www.w3schools.com/js/js_json_parse.asp