[Javascript] JSON 들여다보기

JSON이란 Javascript Object Notation의 약자로, 자바스크립트 객체 표기법을 말한다.

자바스크립트와 백엔드간 데이터 송수신은 단일 형식으로 통일되어 모두 string 타입으로 이루어지기 때문에 송수신 모듈에서 타입 변환이 필요하다. 

하여, 서버로 데이터를 보낼 때는 JSON.stringify(객체), 서버에서 데이터를 받을 때는 JSON.parse(stringData)를 사용한다. 

 

사용해보면서 익히는게 최고다. 

	const stringData = '{"id": "0001", "type": "donut","name": "cake","image":{"url":"image/0001.jpg","width": 200, "height":200}, "thumbnail": {"url":"image/thumbnails/0001.jpg","width": 32, "height": 32}}';
        let parsedData = JSON.parse(stringData);
        let stringedData = JSON.stringify(parsedData);
        console.log(`JSON 타입으로 변환된 데이터: ${parsedData}`);
        console.log(`string 타입으로 재변환된 데이터: ${stringedData}`);
        console.log(typeof parsedData);
        console.log(typeof stringedData);

라인별로 떼어낸 해석이다;

1. string타입으로 된 데이터를 생성했다. 

2. 해당 데이터로 parsedData라는 이름의 JSON 데이터를 생성했다.

3. JSON 데이터로 stringedData를 다시 생성했다.

4. 콘솔에 parsedData를 출력

5. 콘솔에 stringedData를 출력

6. parsedData의 데이터 타입을 콘솔에 출력

7. stringedData의 데이터 타입을 콘솔에 출력

콘솔에 출력된 결과값들은 아래와 같다.

JSON타입 데이터는 그 자체를 콘솔출력했을 때 객체라고만 출력된다.

string 타입의 데이터는 역시 문자열로 출력된다. 

JSON 데이터는 데이터 타입이 객체, string 데이터는 역시 string임을 확인할 수 있다.

 

JSON 데이터는 그냥 출력이 되지 않기 때문에 key, value 값을 뽑아내서 출력해야한다.

하자.

    <button type="button" id="clickMe">clickMe</button>
    <h3 id="printHere"></h3>

먼저 날클릭해줘요라는 버튼과 객체데이터를 출력시킬 HTML태그를 작성한다.

 

	document.getElementById('clickMe').addEventListener('click', function(){
            for(let k in parsedData){
                document.getElementById("printHere").innerHTML += `${k} : ${parsedData[k]}<br>`; 
            }
        })

간단하게 가자. key 값과 value를 붙여서 내보내면 되겠지 뭐.

버튼 눌러본다.

어?

아뿔사. 

자세히보면 parsedData의 속성이 단순하지 않다. parsedData는 url, width, height를 속성으로 갖는 image와 thumbnail 객체들을 속성으로 가지고 있다. image와 thumbnail 객체들의 속성까지 싹 꺼내서 한눈에 보이게 출력해보자. 

 	document.getElementById('clickMe').addEventListener('click', function(){
            for(let key in parsedData){
                if(key == 'image' || key == 'thumbnail'){
                    document.getElementById("printHere").innerHTML += `${(key)}<br>`;
                    for(let inKey in parsedData[key]){
                        document.getElementById("printHere").innerHTML += `-${inKey} : ${parsedData[key][inKey]}<br>`;
                    }
                }else{
                    document.getElementById("printHere").innerHTML += `${key} : ${parsedData[key]}<br>`;
                }
            }
        })

단순하게 했다. key 값이 image나 thumbnail이면 내부 key와 내부 value까지 출력시키는 if문을 중간에 넣어줬다.

그렇지.