JSON(JavaScript Object Notation)
- 자바스크립트 객체 표기법
- key와 value 값이 쌍으로 구성된 형태의 객체 표기법
- 클라이언트와 서버 사이에서 데이터 교환 목적으로 사용
- 웹 서버에서 수신하는 데이터는 문자열 -> 문자열 데이터를 JSON 파싱 함수를 사용해서 자바스크립트 객체로 변환 가능
- 최근의 브라우저들은 전부 내장 객체로 JSON 변환 기능 지원
자바스크립트 객체 JSON 변환
- 자바스크립트 객체 → JSON data로 변환
- stringify() : 메서드 사용
- 결과 : 제이슨 형태의 문자열
- JSON data를 자바스크립트 객체로 변환
- parse() 메서드
- 결과 : object
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript JSON 데이터 파싱</title>
<script type="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); // object
// bubbles data description 추출
var bubbles = result.bubbles;
for (var i in bubbles) {
console.log(bubbles[i].data.description);
}
// scenario name "자기 소개" 추출
console.log(result.scenario.name);
// intent 요소들 추출
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 = result2.bubbles;
for (var i in bubbles) {
console.log(result2.bubbles[i].data.cover.data.imageUrl);
}
</script>
</head>
<body>
</body>
</html>'Frontend > Javascript' 카테고리의 다른 글
| Javascript 프레임워크와 라이브러리 필요성 및 차이점 (0) | 2021.12.17 |
|---|---|
| 응용 예제 : 음성 녹음 (0) | 2021.12.15 |
| 프로토타입; prototype (0) | 2021.12.13 |
| 사용자 정의 객체 (0) | 2021.12.13 |
| 폼 유효성 확인 예제 (0) | 2021.12.13 |