Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Archives
Today
Total
관리 메뉴

Code Habit

[JavaScript] JSON 파싱 본문

카테고리 없음

[JavaScript] JSON 파싱

코드베어 2022. 12. 8. 22:02

JSON은 JavaScript Object Notation의 약어로 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷이다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용하는데 최근에는 다른 플랫폼에서도 공용화된 문서 포맷으로 많이 사용한다.

 

JSON 객체는 JavaScript에 내장되어 있어 문법 내 어디서든 사용 가능하며 데이터는 key와 value가 쌍으로 이루어져 있다.

 

JSON 객체와 문자열(JSON형식)간의 변환이 가능하다.

 

- JSON -> String

const str = '{ \
    "name" : "이진성", \
    "nick" : "코드베어", \
    "age" : "19", \
    "location" : "suwon" \
}';
const json = JSON.parse(str);
console.log(str);
console.log(json);

// 출력
{     "name" : "이진성",     "nick" : "코드베어",     "age" : "19",     "location" : "suwon" }
{ name: '이진성', nick: '코드베어', age: '19', location: 'suwon' }

JSON 형식의 문자열 데이터를 JSON.parse()를 이용해 JSON데이터로 변환하였다. 변화된 데이터의 key값의 ""가 사라진 것을 확인할 수 있다.

 

- String -> JSON

const str = '{ \
    "name" : "이진성", \
    "nick" : "코드베어", \
    "age" : "19", \
    "location" : "suwon" \
}';
const json = JSON.parse(str);
console.log(str);
console.log(json);

const str2 = JSON.stringify(json);
console.log(str2);

// 출력
{     "name" : "이진성",     "nick" : "코드베어",     "age" : "19",     "location" : "suwon" }
{ name: '이진성', nick: '코드베어', age: '19', location: 'suwon' }
{"name":"이진성","nick":"코드베어","age":"19","location":"suwon"}

JSON.stringify() 함수를 통해 JSON데이터를 문자열로 다시 변환하였다. key값에 다시 ""가 붙어 있는 것을 확인 할 수 있다.

 

보통 서버와 클라이언트가 데이터를 주고 받을 때 JSON데이터를 JSON형식의 문자열로 변환하여 주고 받고 이를 다시 JSON데이터로 변환하여 활용한다.