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 |