JSON 객체

현재 가장 많이 사용되는 자료 표현 방식은 JSON 객체이다.

JSON은 JavaScript Object Notation 의 약자로 자바스크립트의 객체처럼 자료를 표현하는 방식이다.

하나의 자료 예

{
	"name": "미역국",
    "price": 10000,
    "restaurant": "기사식당"
    
}

여러 개의 자료 예

[{
	"name": "미역국",
    "price": 10000,
    "restaurant": "기사식당"
    
}, {
	"name": "돼지불백",
    "price": 12000,
    "restaurant": "기사식당"
    
}]

JSON이라는 용어를 처음 들으면 어려운 말처럼 느껴지는데, 자바스크립트 배열과 객체를 활용해 어떤 자료를 표현하는 형식일 뿐이다.

지금까지 살펴보았던 배열과 객체로 "음식"을 표현한 것이므로 쉽게 이해할 수 있을 것이라 생각한다.
다만 JSON형식은 약간의 추가 규칙이 있다.

• 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있다.
• 문자열은 반드시 " "로 만들어야 한다.
• key에도 반드시 " "를 붙여야 한다.

---

▶ JSON.stringify() 메소드

대부분의 프로그래밍 언어는 JSON 형식의 문자열을 읽어들이는 기능이 있다.
그래서 네트워크를 통해서 각각의 프로그래밍 언어로 만든 애플리케이션들이 데이터를 교환할 때 활용됨
자바스크립트 객체를 JSON 문자열로 변환할 떄는 JSON.stringify() 메소드를 사용함.

자바스크립트 객체 ➡ JSON 문자열 = JSON.stringify()

JSON.stringify()메소드

//자료를 생성합니다.
const data = [{
  name: '미역국',
  price: 10000,
  restaurant: '기사식당'
}, {
  name: '돼지불백',
  price: 12000,
  restaurant: '기사식당'
}]

//자료를 JSON으로 변환합니다.
console.log(JSON.stringify(data),
console.log(JSON.stringify(data, null, 2)) //null: 일반적으로 사용, 2:들여쓰기 2칸으로 설정

JSON.stringify() 메소드를 출력하면 다음과 같다.

[{"name":"미역국","price":"10000","restaurant":"기사식당"},{"name":"돼지불백","price":"12000","restaurant":"기사식당"}]
// 들여쓰기 2칸이 추가됨.
[  
  {
    "name":"미역국",
    "price":"10000",
    "restaurant":"기사식당"
  },
  {
    "name":"돼지불백",
    "price":"12000",
    "restaurant":"기사식당"
  }
]

---

▶ JSON.parse() 메소드

JSON 문자열을 자바스크립트 객체로 전개할 때는 JSON.parse() 메소드를 사용한다.
매개변수에 JSON 형식의 문자열을 넣어주면 된다.

JSON 문자열 ➡ 자바스크립트 객체 = JSON.parse()

//자료를 생성
const data = [{
  name: '미역국',
  price: 10000,
  restaurant: '기사식당'
}, {
  name: '돼지불백',
  price: 12000,
  restaurant: '기사식당'
}]

//자료를 JSON으로 변환합니다.
const json = JSON.stringify(data)
console.log(json)

//JSON 문자열을 다시 자바스크립트 객체로 변환합니다.
console.log(JSON.parse(json))

JSON.parse() 메소드를 출력하면 다음과 같습니다.

[{"name":"미역국","price":"10000","restaurant":"기사식당"},{"name":"돼지불백","price":"12000","restaurant":"기사식당"}]

Array(2)
0: { name: '미역국', price: 10000, restaurant: '기사식당'}
1: { name: '돼지불백', price: 12000, restaurant: '기사식당'}

length: 2
__proto__:Array(0)

JSON 객체 의 메소드는 2가지 뿐이다. 추가적인 내용이 궁금하다면 다음 문서를 살펴보길...

http://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON