티스토리 뷰

WEB/Java BackEnd

[WEB] JSON

Happyoon ~ 2021. 12. 1. 01:24
728x90
반응형

JSON이란, JavaScript Object Notation의 약어로, 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 Data 교환 형식으로, 자바스크립트에서 객체를 만들 때 사용하는 표현식을 의미한다. 

 

자바스크립트는 JSON 형식의 문서를 쉽게 객체로 변환할 수 있다.

 

JSON은 다음과 같이 표기한다.

{
  "members": [
    {
      "name": "name1",
      "job": "developer"
    },
    {
      "name": "name2",
      "job": "cashier"
    }
  ]
}

key-value가 존재할 수 있고 객체, 배열 등의 표기를 사용할 수 있다. 

key는 "" 로 감싸야 한다.

value가 될 수 있는 데이터 타입

"JSON 형식의 문자열을 오브젝트로 파싱하는 법"

예제 1

Step05_JSON.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/jquery/Step05_JSON.jsp</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
   <input id="inputData" type="text" placeholder="JSON 입력..."/>
   <button id="parseBtn">파싱</button>
   <script>
      $("#parseBtn").on("click", function(){
         let jsonStr=$("#inputData").val();
         console.log(jsonStr);
         //JSON 형식의 문자열은 JSON.parse() 함수를 이용해서 실제 javascript 객체로 만들수 있다.
         let result=JSON.parse(jsonStr);
         console.log(result);
      });
   </script>
</body>
</html>

JSON.parse()로 쉽게 javascript 객체로 만들 수 있다.

 

 

 

파싱 버튼 눌렀을 때

JSON 형식의 문자열로 데이터가 주어졌을 때 파싱하여 실제 배열로 만들기

예제 2

Step05_JSON2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/jquery/Step05_JSON2.jsp</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
   <h1>친구 목록입니다.</h1>
   <ul id="one">
   
   </ul>
   <h1>친구 목록입니다2.</h1>
   <ul id="two">
   
   </ul>
   <script>
   ////친구목록이 배열 형식으로 있다면   
   let names=["김구라", "해골", "원숭이"];
      
      for(let i=0; i<names.length; i++){
         let tmp=names[i];
         $("<li>").text(tmp).appendTo("#one");
      }
      //친구목록이 JSON 문자열 형식으로 있다면
      let data='["주뎅이", "덩어리", "돼지"]';
      //JSON 문자열을 파싱해서 실제 배열로 만든다. 
      let result=JSON.parse(data);
      
      for(let i=0; i<result.length; i++){
         let tmp=result[i];
         $("<li>").text(tmp).appendTo("#two");
      }
   </script>
</body>
</html>

 

반응형

'WEB > Java BackEnd' 카테고리의 다른 글

[WEB] jQuery #4 / DateTimePicker  (0) 2021.12.01
[WEB] jQuery #3 / fotorama 이미지 슬라이드 image slide  (0) 2021.12.01
[WEB] jQuery #2 / Effect - 숨기기, 보이기, 토글, hide()  (0) 2021.12.01
[WEB] jQuery #1 / chain action, EventListener  (0) 2021.12.01
[WEB-jsp/servlet] Filter 사용하기 / 한글 인코딩, 로그인에 필터 사용헤보기  (0) 2021.11.30
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함