티스토리 뷰

development/html javascript CSS

[JavaScript] JSON / JSON.parse(), JSON.stringify()

Happyoon ~ 2021. 10. 19. 16:29
728x90
반응형

JSON은 JavaScript Object Notation이다. 

따라서 JSON 형식에서 object 형식으로의 전환, object에서 JSON 형식으로의 전환이 자유롭다.

JSON 작성 형식은 다음과 같다.

 

 

[ json 문자열 작성 형식 ] 

 

            형식1 : { }

            형식2 : [ ]

 

            {

                "키값" : value, "키값2": value2, ...

            }

 

            - 키값은 반드시 double quotation  "" 로 감싸야 된다.

            - value 가 될수 있는 형식

            숫자 : 10 또는 10.1 와 같이 숫자를 작성 하면된다.

            문자 : "xxx"   double quotation 으로 감싸면 된다.

            논리값 : true or false 를 작성하면 된다.

            obejct :  { }

            array : [ ]

            빈값 : null

            function 은 존재하지 않는다.

            array 는 [value1, value2, value3, ... ] 와 같이 , 로 구분해서 값을 나열하면된다.  

 

 

예시

 {

            "num":1,

            "name":"김구라",

            "isMan":true,

            "phone":{

                "brand":"apple",

                "color":"pink"

            },

            "friends":["원숭이","주뎅이","덩어리"],

            "pocket": null

        }

 

예제

JSON 형식의 문자열을 object로 변환하기

 //서버로 부터 받아온 문자열이라고 가정 하자 
        let info = `
            {
                "num":1,
                "name":"김구라",
                "isMan":true,
                "phone":{
                    "brand":"apple",
                    "color":"pink"
                },
                "friends":["원숭이","주뎅이","덩어리"],
                "pocket": null
            }        
        `;
        
        // json 형식의 문자열을 object 로 변환하기 
        let obj = JSON.parse(info);

JSON.parse(변수명)으로 작성

 

 

예제

object를 JSON 문자열로 변환하기

//object를 json 문자열로 변환하기
let result9 = JSON.stringify(car1)

JSON.stringify(변수명)으로 작성

 

 

전체 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step10_JSON.html</title>
</head>
<body>
    <h1>JavaScript Object Notation(JSON)</h1>
    <script>
        /*
            json 문자열 작성 형식

            형식1 : { }
            형식2 : [ ]

            {
                "키값" : value, "키값2": value2, ...
            }

            - 키값은 반드시 double quotation  "" 로 감싸야 된다.
            - value 가 될수 있는 형식
            숫자 : 10 또는 10.1 와 같이 숫자를 작성 하면된다.
            문자 : "xxx"   double quotation 으로 감싸면 된다.
            논리값 : true or false 를 작성하면 된다.
            obejct :  { }
            array : [ ]
            빈값 : null 
            function 은 존재하지 않는다. 
            array 는 [value1, value2, value3, ... ] 와 같이 , 로 구분해서 값을 나열하면된다.  
        */

        /*

        {
            "num":1,
            "name":"김구라",
            "isMan":true,
            "phone":{
                "brand":"apple",
                "color":"pink"
            },
            "friends":["원숭이","주뎅이","덩어리"],
            "pocket": null
        }

        */

        //서버로 부터 받아온 문자열이라고 가정 하자 
        let info = `
            {
                "num":1,
                "name":"김구라",
                "isMan":true,
                "phone":{
                    "brand":"apple",
                    "color":"pink"
                },
                "friends":["원숭이","주뎅이","덩어리"],
                "pocket": null
            }        
        `;
        
        // json 형식의 문자열을 object 로 변환하기 
        let obj = JSON.parse(info);
        
        // console 창에서 각각의 변수에 들어 있는 값을 확인해 보세요.
        let result1 = obj.num;
        let result2 = obj.name;
        let result3 = obj.phone;
        let result4 = obj.phone.brand;
        let result5 = obj.phone.color;
        let result6 = obj.friends;
        let result7 = obj.friends[0];
        let result8 = obj.friends[1];

        let car1 = {name:"소나타", brand:"현대"};
        
        //object를 json 문자열로 변환하기
        let result9 = JSON.stringify(car1)

    </script>
</body>
</html>
반응형

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] Canvas 활용하기 #2 / clearRect(), 배경이미지 넣기 / 마우스 커서 위치 설정하기  (0) 2021.10.26
[JavaScript] Canvas 활용하기  (0) 2021.10.26
[JavaScript] this 복습하기 / EventListener에서의 this  (0) 2021.10.19
[JavaScript] Math 객체 활용하기 / ceil(), round(), floor(), random()  (0) 2021.10.19
[JavaScript] setInterval() 주기마다 반복 작업 시행 method  (0) 2021.10.15
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함