본문 바로가기

JS

JSON

JSON

언어들 간의 데이터 타입이 호환되지 않는 문제점이 있는데 이를 극복하기 할 수 있다. 경량의 데이터 교환 형식이다. JSON 형식의 데이터를 다른 언어에서 배열로 바꿔서 쓸 수 있다.

XML은 태그를 사용해서 정보를 표현한다. 태그를 많이 사용하기 때문에 데이터 용량이 증가한다. XML은 문서이기 때문에 어떤 과정을 거쳐 배열이나 객체로 만들어야한다.


리눅스 터미널에서 php -a를 입력하고 php 코드를 입력할 준비를 한다.

$student = array('kim', 'lee', 'choi'); #php에서 배열을 만드는 방법이다.

print_r($student); #student 배열을 출력하면 아래와 같다.


Array

(

[0] => kim

[1] => lee

[2] => choi

)


php에서 배열을 json형식으로 변환하기 위해 json_encode함수를 쓴다. json_encode는 json형식으로 만들겠다는 의미이다. encode는 데이터를 코드화(0, 1)한다는 것이다.


echo json_encode($student); 를 실행하면

["kim","lee","choi"]가 출력된다.


javascript의 배열과 php의 배열 형식은 다르기 때문에 호환되지 않지만 php에서 배열을 json으로 변환해주면 해결된다.


print_r(json_decode) decode는 형식을 풀어내는 것이라고 생각하면 된다.

print_r(json_decode('["kim","lee","choi"]'));

Array

(

    [0] => kim

    [1] => lee

    [2] => choi

)



크롬 브라우저를 켜고 F12를 누른 뒤 console로 진입하여

json_student = '["kim","lee","choi"]'; //변수에 배열 값 넣기

"["kim","lee","choi"]" //결과

student = JSON.parse(json_student); //배열 값을 JSON parsing하여 student에 배열로 넣기

(3) ["kim", "lee", "choi"] //결과

for(i=0;i<student.length;i++){ //student의 길이(3)만큼 반복하면서 student 배열의 원소 출력

alert(student[i]);

}


경고 창에 kim, lee, choi가 순서대로 나온다.


다시 크롬 브라우저에서 F12를 누른 뒤 console창에 진입하여 코드를 작성한다.

var pi=3.14

var str="string" 

JSON.stringify(pi);를 입력하면

"3.14"가 출력되는데 이를 보고 stringify는 객체를 문자열로 변환해준다는 것을 알 수 있다. 영어 단어만 봐도 느낌이 온다.

JSON.stringify(str);을 입력하면

""string""이 출력된다. 이미 문자열인 str객체를 다시 문자열화 해주는 것이다.


이번에는 parse를 사용해본다.

JSON.parse("Hi");라고 하면 자리 0의 JSON에 예상치 못한 H 토큰이 있다고 나온다. parse는 문자열을 Javascript Object로 변환하는 것인데 "" 안에 문자열이 아닌 그냥 Hi가 들어있으므로 발생하는 문제이다. 문자열을 표현하기 위해 \를 입력하여.

JSON.parse("\"Hi\""); 이렇게 작성해주면 출력으로

"Hi"가 잘 나온다.

JSON.parse("5");를 입력하면

5가 나온다.


typeof(JSON.parse("5"))

"number"

typeof(JSON.parse("\"Hi\""))

"string"



JSON editor : http://jsoneditoronline.org/http://jsonmate.com/


한글지원 JSON 홈페이지 : http://json.org/


JSON 작성 검증 사이트 : http://jsonlint.com/


JSON data 정렬 사이트 : http://json.parser.online.fr/

'JS' 카테고리의 다른 글

Javascript 반복문  (0) 2018.05.02
Javascript 조건문  (0) 2018.05.02
Javascript 연산자  (0) 2018.05.01
Javascript 주석  (0) 2018.05.01
Javascript 변수  (0) 2018.05.01