JavaScript - JSON 데이터 변환, 추출, 원하는 데이터 찾기

JSON(JavaScript Object Notation)

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

자바스크립트 객체 JSON 변환

• 자바스크립트 객체 to JSON data로 변환
  • stringify() 메소드 사용
    • 결과 : JSON 형태의 문자열
• JSON data to 자바스크립트로 변환
  • parse() 메소드
    • 결과 : object

JSON parsing 예제 - json-Parsing.html

        <script type="text/javascript">
            let car = {
                no : "11가 1111",
                name : "소나타",
                maker : "현대",
                cc : 2000,
                year : 2021
            };
            // 자바스크립트 객체를 JSON 데이터로 변환

            console.log(car)
            // {no: '11가 1111', name: '소나타', maker: '현대', cc: 2000, year: 2021}

            var json = JSON.stringify(car);
            console.log(json);
            // {"no":"11가 1111","name":"소나타","maker":"현대","cc":2000,"year":2021}

            // JSON 데이터를 자바스크립트 객체로 변환
            var obj = JSON.parse(json);
            console.log(obj);
            // {no: '11가 1111', name: '소나타', maker: '현대', cc: 2000, year: 2021}
            console.log(obj.no); // 11가 1111
            console.log(obj.name); // 소나타

            for(var i in obj) {
                console.log(obj[i]);
            }
            // 11가 1111
            // 소나타
            // 현대
            // 2000
            // 2021
        </script>

JSON parsing 연습문제 - jsonEx.html

<script type="text/javascript">
            // 이미 json 값임.
            let 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);
            }
            // scenario.name에서 "자기소개" 추출
            var scenario = result.scenario.name;
            console.log(scenario);
            // 소개, 직업, 일, 역할, 담당, 누구 추출
            var intent = result.scenario.intent;
            for(var i in intent) {
                console.log(intent[i]);
            }

            let 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 bubbles2 = result2.bubbles;
            for(var i in bubbles2) {
                console.log(bubbles2[i].data.cover.data.imageUrl);
            }
        </script>