JavaScript - JSON

JavaScript

JSON(JavaScript Object Notation)

• 자바스크립트 객체 표기법
• key, value 값이 쌍으로 구성된 형태의 객체 표기법
• 클라이언트와 서버 사이에서 데이터 교환 목적으로 사용
• 웹 서버에서 수신하는 데이터는 문자열이다. 문자열 데이터를 JSON 파싱 함수를 사용해서 자바스크립트 객체로 변환이 가능하다.
• 최근의 브라우저들은 전부 내장 객체로 JSON 변환 기능 지원
• 형식

{key:value}
{"name":"홍길동"}

자바스크립트 객체 -> JSON 변환

• JavaScript -> JSON data
  • Stringify() 메서드 사용
  • 결과: JSON 형태의 문자열
• JSON data -> JavaScript
  • parse() 메서드 사용
  • 결과 : object

json_parsing.html

<script type="text/javascript"> 
    let car = {
        no:'11가1111',
        name:'소나타',
        maker:'현대',
        cc:2000,
        year:2021,
        accident:null
    };

    // 자바스크립트 객체를 JSON으로 변환
    var json = JSON.stringify(car);
    console.log(json);

    // JSON 데이터를 자바스크립트 객체로 변환
    var obj = JSON.parse(json);
    console.log(obj);
    console.log(obj.no);
    console.log(obj.name);

    // 전체 값 출력
    for(var i in obj){
        console.log(obj[i]);
    }
</script>

jsonEx.html

<script text="text/javascript">
     var result = {"version":"v2","userId":"U47b00b58c90f8e47428af8b7bddc1231heo2","timestamp":1621444015108,"bubbles":[{"type":"text","data":{"description":"저는 독서 지도사입니다"},"information":[{"key":"chatType","value":"TEXT"},{"key":"chatType","value":"TEXT"},{"key":"score","value":"1.0"},{"key":"scenarioName","value":"자기 소개"},{"key":"conversationTypes","value":"소개␞직업␞일␞역할␞담당␞누구"},{"key":"matchingType","value":"exactMatch"},{"key":"domainCode","value":"ai_chatbot_ex"}],"context":[]}],"scenario":{"name":"자기 소개","chatUtteranceSetId":3305931,"intent":["소개","직업","일","역할","담당","누구"]},"entities":[],"keywords":[],"event":"send"};
     console.log(result);

     var bubbles = result.bubbles;
     for(var i in bubbles){
         console.log(bubbles[i].data.description);
     }

     console.log(result.scenario.name);

     var intent = result.scenario.intent;
     for(var i in intent){
         console.log(intent[i]);
     }

     // imageUrl
     var result2 = {"version":"v2","userId":"U47b00b58c90f8e47428af8b7bddc1231heo2","timestamp":1621393563377,"bubbles":[{"type":"template","data":{"cover":{"type":"image","data":{"imageUrl":"https://clovachatbot.ncloud.com/ib496e504bl244-0639-439d-93b0-ec4d72655cf8","imagePosition":"top","action":{"type":"link","data":{"url":"https://www.multicampus.com/cs/map/mapMain?p_menu=MTA1I01BSU4=&p_gubun=Qw==&req=0"}}}}}}],"scenario":{"name":"독서 모임 장소 약도 문의","chatUtteranceSetId":3306432,"intent":["장소","위치","지도","약도"]},"entities":[],"keywords":[],"event":"send"};

     var bubbles = result.bubbles;
     for(var i in bubbles){
         console.log(result2.bubbles[i].data.cover.data.imageUrl);
     }
</script>