공부 일지/웹 개발

[JavaScript] JSON 객체 정리

배똥회장 2022. 8. 29. 10:23
728x90

📝 기본 코드

 var data = {
        employees: [
          { firstName: "John", lastName: "Doe" },
          { firstName: "Anna", lastName: "Smith" },
          { firstName: "Peter", lastName: "Jones" },
        ],
      };

      var stringValue = JSON.stringify(data); //객체를 문자열로 전환

      var text =
        '{ "employees" : [' +
        '{ "firstName":"John" , "lastName":"Doe" },' +
        '{ "firstName":"Anna" , "lastName":"Smith" },' +
        '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

      var obj = JSON.parse(text); //문자열 형태의 JSON을 Object 객체로 변환
  • JSON.stringify : 데이터를 서버로 전송하기 위해서는 데이터 형태를 문자열 형태로 변환해야 한다. JSON.stringify는 Object 데이터를 문자열로 변환해준다.
  • JSON.parse : 서버로부터 응답받은 데이터는 문자열 형태이다. JSON.parse 함수를 사용하면 자바스크립트 Object 객체로 변환해준다.

📝 변형 및 실행 결과

📌 1번

console.log(stringValue);

 

{ "employees":
     [
          {"firstName" : "John", "lastName" : "Doe"},
          {"firstName" : "Anna", "lastName" : "Smith"},
          {"firstName" : "Peter", "lastName" : "Jones"}
     ]
}


📌 2번

console.log(stringValue["employees"]);

 

undefined


📌 3번

console.log(data.employees[0]);

{
     "firstName": "John",
     "lastName": "Doe"
}


📌 4번

let obj = JSON.parse(stringValue);
console.log(obj["employees"]);

[
     {
          "firstName": "John",
          "lastName": "Doe"
     },
     {
          "firstName": "Anna",
          "lastName": "Smith"
     },
     {
          "firstName": "Peter",
          "lastName": "Jones"
     }
]

  • data의 결과값과 동일한 결과를 출력함
728x90