[JS] JSON 데이터입출력

JSON

: Javascript Object Notation 자바스크립트 객체 표기법

• 데이터 요청 및 응답처리에 필요한 데이터의 표준형식을 제공하는 타입
• 백앤드(서버)언어의 종류에 상관없이 데이터 송수신 단일 형식으로 통일
• 많은 양의 데이터를 실시간으로 전송하는 경우 사용
• 자바스크립트의 객체 형태를 갖고 있기떄문에 구조파악이 잘되고, 제작도 쉽다
    ( 특히 웹 분야의 자바스크립트가 모든 프론트에 호환된다는 점을 활용 )
• 입출력시에는 JSON을 사용!
  • 왜?
  • 데이터의 전송은 전부 String타입으로 이루어짐
  • 서버로 데이터를 보낼때 :  json to string > JSON.stringify(jsObject);
  • 서버로부터 데이터를 받을때 : string to json > JSON.parse(stringData); 
• 보내는 객체 생성 예시) https://jungeun980906.tistory.com/238

 

 

---

 

 서버로부터 데이터를 받는 경우 

: string to json > JSON.parse(stringData);  

 

 

<script>

        const stringData = '{"id":"1234", "type":"donut","name":"cake",'+

        '"image":{"url":"img/0001.jpg","width":"200","height":"200"},'+

        '"thumbnail":{"url":"img/thumbnail/0001.jpg","width":"20","height":"20"}}';

        let parseData = JSON.parse(stringData);

       

        console.log(parseData);

    </script>

 

 

 

>  받은 데이터 출력

• for in 안에 for in으로 순회 (객체는 for in사용)
• for(const s in parseData){ }로 순회하는 경우,
  • s로 key값 가져오기 (id)
  • parseData[s]로 value값 가져오기 (1234)

 

 

<script>

 

        const stringData = '{"id":"1234", "type":"donut","name":"cake",'+

        '"image":{"url":"img/0001.jpg","width":"200","height":"200"},'+

        '"thumbnail":{"url":"img/thumbnail/0001.jpg","width":"20","height":"20"}}';

        let parseData = JSON.parse(stringData);

        console.log(parseData);

        //console에 key : value 형식으로 출력해보기 (for in으로 접근하기)

        //--------------------------------------------------------------------------------------------------------------

       

 

        for(const s in parseData){

           

            if(s == 'image'){ //image의 경우

                console.log(`----${s}----`);  //----image----

                for(const i in parseData.image){

                    console.log(i,':', parseData.image[i]); //url : img/0001.jpg

                }

            } else if(s == 'thumbnail'){

                console.log(`----${s}----`); //----thumbnail----

                for(const t in parseData.thumbnail){

                    console.log(t,':', parseData.image[t]); //url : img/thumbnail/0001.jpg

                }

               

            } else {

                console.log(s,':',parseData[s]); // id : 1234

            }

        }

        //-------------------image, thumbnail을 한번에 정리하는 경우! (선생님)---------------------------------------

       

 

        for(const s in parseData){

           

            if(s == 'image' || s == 'thumbnail'){

                let innerObject = parseData[s]; // image 또는 thumbnail이 object에 저장

                for(const o in innerObject){

                    console.log(o, ":", innerObject[o]);

                }

            } else {

                console.log(s,':',parseData[s]); // id : 1234

            }

        }

 

    </script>

 

 

---

 

 서버로 데이터를 보내는 경우  

: string to json > JSON.stringify(jsObject);

 

<script>

 

    const myInfoData = {

        "name":"kim",

        "age":"30",

        "email":"123@naver,com",

        "major":{

            "m1":"java",

            "m2":"html",

            "m3":"css"

        }

    }

 

    // 객체를 문자열로 반환해서 전달!

    // JSON.stringify()사용

 

    let a = JSON.stringify(myInfoData);

    console.log(a);

    console.log(typeof a); //string

 

</script>