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

티스토리 뷰

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

« 2024/05 »
일	월	화	수	목	금	토
			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	31

글 보관함

yoon's Devlog

티스토리 뷰