[jQuery] 19장 JSON

JSON (Java Script Object Notation, 자바스크립트 객체 표기법)

: XML의 대안으로 좀 더 쉽게 데이터를 교환하고 저장하기 위해 만들어진 텍스트 기반의 데이터 교환 표준 (=자바 스크립트 언어에서 유래)

- 특징

1. JS의 리터럴 표현식을 활용해 간단한 포맷으로 데이터를 구분할 수 있는 문자열 포맷

2. 텍스트 기반이므로 사람이나 어떠한 프로그래밍 언어라도 데이터를 읽고 사용 가능

3. 네트워크를 사용하는 데이터 통신은 데이터를 byte형태로 전달한다.
4. 서버 <-> 클라이언트, 서버 <-> 어플리케이션에서 처리할 데이터를 주고 받을 때 쓰는 자료형식 중 대표적인 형식이 XML과 JSON이다.

5. 현재는 XML을 밀어내고 대표적인 데이터 전송 포맷으로 자리잡음

6. 구조화 된 데이터 표현을 위한 경량 데이터 교환 형식으로 key:value 포맷 형태를 사용한다
7. 항상 큰 따옴표로 묶어 사용하며 data값에서 역슬래시(\)와 큰 따옴표(")는 사용 불가하다

- 변환

자바 스크립트 객체 -> JSON

JSON -> 자바 스크립트 객체

- 확장자 : .json

- JSON 형식

// JavaScript
{name : “홍길동“, addr : “대전“, tel : “010-1234-5678”}

// JSON object
{“name” : “홍길동“, “addr” : “대전“, “tel” : “010-1234-5678”}

// 배열
[ “홍길동“, “개나리“, “진달래”, “이도령" ]

// JSON object 배열
[{“name” : “홍 “, “addr” : “대전“, “tel” : “010-1234-5678”},
{“name” : “홍길 “, “addr” : “대전“, “tel” : “010-1234-5678”},
{“name” : “홍길동“, “addr” : “대전“, “tel” : “010-1234-5678”} ]

- JSON 메소드

메소드	설 명
JSON.stringify(myObj)	문자열로 변환 (서버로 전송 시)
JSON.parse(string, function)	JavaScript 객체로 변환

JSON 예제

자바스크립트 객체 => JSON문자열 포맷 변환 (stringify)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>JSON 변환 테스트</button>
    <div></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $('button').on('click',function(){

        // 리터럴 객체 생성
        // key의 타입은 string이므로 따옴표 사용 유무 상관없음
        let obj = {
            json    : "제이슨",
            "특징"  : "경량의 텍스트기반 데이터교환 표준으로 xml의 대안",
            형태    : "JS 리터럴 표현식을 활용한 간단한 문자열 포맷(\"key\":\"value\" )",
            메소드  : ["stringify()", "parse()"],
            기능    : {stringify:"JS객체를 JSON화", parse : "JSON문자열 데이터를 JS객체화"}
        };

        // 자바스크립트 객체 => JSON문자열 포맷 변환
        // JSON이라는 내장 객체를 제공하며 stringify()
        let jsonStr = JSON.stringify(obj);
        console.log( jsonStr, typeof jsonStr );

    });
</script>
</body>
</html>

JSON문자열 포맷 => 자바스크립트 객체 변환 (parse)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>JSON 변환 테스트</button>
    <div></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $('button').on('click',function(){

        // 리터럴 객체 생성
        // key의 타입은 string이므로 따옴표 사용 유무 상관없음
        let obj = {
            json    : "제이슨",
            "특징"  : "경량의 텍스트기반 데이터교환 표준으로 xml의 대안",
            형태    : "JS 리터럴 표현식을 활용한 간단한 문자열 포맷(\"key\":\"value\" )",
            메소드  : ["stringify()", "parse()"],
            기능    : {stringify:"JS객체를 JSON화", parse : "JSON문자열 데이터를 JS객체화"}
        };

        // 자바스크립트 객체 => JSON문자열 포맷 변환
        // JSON이라는 내장 객체를 제공하며 stringify()
        let jsonStr = JSON.stringify(obj);
        console.log( jsonStr, typeof jsonStr );

        // JSON문자열포맷 ==> 자바스크립트 객체 변환
        // JSON.parse()
        let jsonObj = JSON.parse(jsonStr);
        console.log(jsonObj, typeof jsonObj);
    });
</script>
</body>
</html>

+ 접근 방법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>JSON 변환 테스트</button>
    <div></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $('button').on('click',function(){

        let obj = {
            json    : "제이슨",
            "특징"  : "경량의 텍스트기반 데이터교환 표준으로 xml의 대안",
            형태    : "JS 리터럴 표현식을 활용한 간단한 문자열 포맷(\"key\":\"value\" )",
            메소드  : ["stringify()", "parse()"],
            기능    : {stringify:"JS객체를 JSON화", parse : "JSON문자열 데이터를 JS객체화"}
        };

        let jsonStr = JSON.stringify(obj);
        let jsonObj = JSON.parse(jsonStr);

        console.log(jsonObj.json);
        console.log(jsonObj['형태']);
        console.log(jsonObj.메소드[0]);
        console.log(jsonObj.기능.parse);
    });
</script>
</body>
</html>

'jQuery' 카테고리의 다른 글

[jQuery] 21장 Ajax를 이용한 페이지 예제 (0)	2024.02.28
[jQuery] 20장 Ajax (0)	2024.02.27
[jQuery] 18장 콜백 함수와 체이닝, 동기와 비동기 (1)	2024.02.27
[jQuery] 17장 효과, 애니메이션 (0)	2024.02.27
[jQuery] 16장 필터링 (0)	2024.02.26

'jQuery' 카테고리의 다른 글

티스토리툴바