[JavaScript] JSON

Javascript Object Notaiton의 약자이다. 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량도 적다. 이런 이유로 JSON이 XML을 대체해서 설정의 저장이나 데이터를 전송하는 등에 많이 사용된다.

JSON 문법은 세 가지 타입을 사용한다.

• 단순한 값 : JSON에서 문자열, 숫자, Boolean, null은 모두 자바스크립트와 같은 문법으로 표현한다. Undefined는 지원되지 않는다.
• 객체 : 객체는 순서 있는 키-값 쌍으로 표현한다. 각 값은 원시 타입일 수도 있고 객체나 배열 같은 복잡한 타입일 수도 있다.
• 배열 : 배열은 숫자형 색인으로 접근할 수 있는, 순서 있는 목록으로 표현한다. 각 값은 단순한 값이나 객체, 다른 배열 등을 모두 쓸 수 있다.

자바스크립트에선 이런식으로 변수를 생성하고, 변수에 데이터를 넘겨줬다. 따옴표를 사용하나, 사용하지 않나 console로 확인해보면 똑같이 나온다.

<script>
    var oCar = {
      name : "sonata",
      price: 3000
    }
    var oCar2 = {
      "name" : "sonata",
      "price": 3000
    }
    console.log(oCar);
    console.log(oCar2);
</script>

하지만 json은 다르다. 변수를 선언하지도 않고, 꼭 쌍따옴표를 사용해야한다. 스크립트와는 몇가지 다른점이 있기 때문이다.

1. 변수 선언이 없다. JSON에는 변수가 존재하지 않는다.
2. 문장을 마치는 세미콜론이 없다. Javascript 문장이 아니므로 필요없다.
3. 프로퍼티 이름도 따옴표로 감싸야 유효한 JSON이 된다.
4. Function은 프로퍼티의 값으로 들어갈 수 없다.

JSON은 자바스크립트와 다르다고 하더라도 자바스크립트의 객체 표기법으로부터 파생된 부분 집합이다.
따라서 JSON 데이터는 다음과 같은 자바스크립트 객체 표기법에 따른 구조로 구성된다.

1. JSON 데이터는 이름과 값의 쌍으로 이루어진다.
2. JSON 데이터는 쉼표(,)로 나열된다.
3. 객체(object)는 중괄호({})로 둘러쌓아 표현한다.
4. 배열(array)은 대괄호([])로 둘러쌓아 표현한다.

[{"name": "sonata",
  "price": 3000, 
  "maker": "Hyundai"},
 {"name": "avante",
  "price": 2000, 
  "maker": "Hyundai"},
 {"name": "sorento",
  "price": 4000, 
  "maker": "KIA"},
 {"name": "traverse",
  "price": 5000,
  "maker": "Chevolet"}
]

json의 데이터를 html로 넘겨주기 위해 Ajax를 사용했다. 다음과 같은 구문을 작성한다.

<script>
    var oXhr = new XMLHttpRequest();
    oXhr.open("GET", "./../JSON/2.json");
    oXhr.onreadystatechange = function(){
      if(oXhr.readyState === 4&&oXhr.status ===200){  //현재상태 , 응답상태 200(잘받았다)
        var sResponseText =oXhr.responseText;   //텍스트 문자열로 읽어옴
        var oResponseText = JSON.parse(sResponseText); //parse: 텍스트 문자열을 객체로 변형해줌
        console.log(oResponseText);
        document.write(sResponseText);
      }
    }
    oXhr.send();
</script>

Ajax는 json의 데이터를 무조건 텍스트 문자열로 읽어온다.sResponseText는 문자열 데이터를 가지고 있고 그래서 JSON.parse를 사용해 객체로 변형해준다. oResponseText는 객체로 변형되었기 때문에 oResponseText를 write로 찍으면 데이터값이 아닌 object로만 찍힌다.

oXhr.send();는 데이터를 보낸다는 의미로 알면된다.

erp에서 데이터를 json으로 보내면 문자열로 파싱이 되어 온다. 이 문자열 데이터를 자바스크립트 객체나 배열로 사용하기 위해서는 형변환해줘야 한다. JSON.parse(문자열)이 데이터형변환을 실행하고, 자바스크립트의 객체나 배열로 형변환 시킨다.

데이터를 다시 erp로 보낼때도 문자열로 다시 형변환시켜야 한다. 이땐 JSON.stringify(객체나 배열)을 사용해 문자열로 변형해준다.

  var sStirngData = JSON.stringify(sResponseText); 
  console.log(sStringData);