[Javascript] JSON을 활용해서 javascript 객체 생성하기

2022.03.17(58일 차_목요일)

JSON 표기법

JSON는 JavaScript Object Notation의 약자
서로 다른 프로그래밍 언어 간에 데이터를 교환하기 위한 표기법
Key(이름) , Value(값)으로 이루어진 객체 구조

JSON의 기본적인 형태

// 1) 프로퍼티 <-> 값
 var obj = {
 "프로퍼티 이름" : "값",
 }
 
 // 2) 메소드
 var obj = {
 "메소드 이름" : function() {alert('This is method')}
 }
 
//  3) 메소드(인수)
 var obj = {
 "메소드 이름" : function(인수) {alert('This is method')}
 }

Javascript 객체 생성

memberJson.js 생성

// 자바스크립트로 패키지를 만들수 있다.

var com = new Object(); // com이라는 이름으로 객체 하나 생성

com.util = new Object(); // com.util이 생기면서 객체 하나 생성


// 메서드 생성
com.util.Member = function(id,name,addr) {
	this.id = id;
	this.name = name;
	this.addr = addr;
};

// 메소드를  json형식으로 
com.util.Member.prototype = { // json의 중괄호 newsTitleJson
		
		// Key     Value
		setValue: function(id,name,addr) {
			this.id = id;
			this.name = name;
			this.addr = addr;
		},
		
		// 하나의 데이터를 가져오는 setter 
		setId:function(id) {
			this.id = id;
		},
		// 전체데이터 가져오는 getter
		getValue:function() {
			
			return this.id + ":" + this.name + ":" + this.addr;
		},
		
		getId:function() {
			return this.id;
		},
		
		// 메소드로 만드는 getter
		toString:function() {
			return this.id + ":" + this.name + ":" + this.addr
		}
};

memberJsonClass.jsp - (객체 생성 페이지)

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="<%=cp%>/data/js/log.js"></script>
<script type="text/javascript" src="<%=cp%>/data/js/memberJson.js"></script>

<script type="text/javascript">

	function memberClass() {
		
		//객체 생성
		//1.
		var member = new com.util.Member("suzi","수지","서울");
		log("member1: " + member.id + ", " + member.name + ", " + member.addr);
		
		//2. setter 이용
		member.setValue("inna","인나","부산");
		log("member2: " + member.id + ", " + member.name + ", " + member.addr);
		
		//3. getter 이용
		var memberInfo = member.getValue();
		log("member.getValue(): " + memberInfo);
		
		//4.
		member.setId("insung");
		log("member.toString(): " + member.toString());//member의 toString으로 읽어낸다
		
		//5.
		var id = member.getId();
		log("member.getId(): " + id);
		
	}
	
	window.onload = function() {
		memberClass();
	}

</script>

</head>
<body>
<h1>Javascript 클래스 사용[JSON]</h1>

<hr/>

<div id="console"></div>
</body>
</html>

실행화면

JSON 형식 데이터 읽어오기

newsTitleJson.jsp - (JSON 데이터 읽어와서 출력)

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<style type="text/css">

.news {

	font-size: 10pt;
	display: block; /* 화면을 보여주겠다  none은 숨기는것 */
	margin: 0 auto;
	background: yellow;
	color: blue;
	border: 1px dashed black;
	width: 50%;

}

.newsError {

	font-size: 10pt;
	display: block; /* 화면을 보여주겠다  none은 숨기는것 */
	margin: 0 auto;
	background: orange;
	color: red;
	border: 1px dashed black;
	width: 50%;
}
</style>

<script type="text/javascript" src="<%=cp%>/data/js/httpRequest.js"></script>

<script type="text/javascript">

	function newsTitle() {
		sendRequest("newsTitleJSON_ok.jsp",null,displayNewsTitle,"GET")//경로,데이터,콜백함수,방식
	}
	
	function displayNewsTitle() {
		
		if(httpRequest.readyState==4) {
			if(httpRequest.status==200) {
				
				var jsonStr = httpRequest.responseText;
				//alert(jsonStr);
				
				//eval는 변수를 js의 함수처럼 사용하는 명령어
				var jsonObject = window.eval('(' + jsonStr + ')');
				//alert(jsonObject);
				//alert(jsonObject.count);
				//alert(jsonObject.titles[2].publisher);
				
				var count = jsonObject.count;
				
				if(count>0) {
					
					var htmlData = "<ol>";
					
					for(var i=0; i<jsonObject.titles.length; i++) {
						
						var publisherStr = jsonObject.titles[i].publisher;
						
						var headlineStr = jsonObject.titles[i].headline;
						
						htmlData += "<li>" + headlineStr + " [" +
							publisherStr + "]</li>";
						
					}
					
					htmlData += "</ol>";
					
					var newsDiv = document.getElementById("newsDiv");
					newsDiv.innerHTML = htmlData;
					
					
				}
				
				
			}
		}
			
	}
	
	window.onload = function() {
		newsTitle();
	}

</script>

</head>
<body>

<h1>헤드라인 뉴스</h1>
<hr/>
<br/>

<div style="width: 50%; margin: 0 auto;">뉴스보기</div>

<div id="newsDiv" class="news"></div>

</body>
</html>

newsTitleJSON_ok.jsp - (JSON 데이터 반환)

<%@ page contentType="text/plain; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	//JSON형태 데이터는 xml도 아니고 html도 아니고 text이다 그래서 위에 text/plain;으로 써준다.
%>

{


	"count":6,
	"titles":[
		{
		"publisher":"동아",
		"headline":"[속보] 김세환 선관위 사무총장 사의 표명"
		},
		{
		"publisher":"CNN",
		"headline":"50만원짜리 삼성폰 실물공개…'가성비 갑vs충전기는?'"
		},
		{
		"publisher":"한국",
		"headline":"1억 넣으면 하루 5400원씩 매일 이자 준다는 '이것'"
		},
		{
		"publisher":"JTBC",
		"headline":"'GOS 논란 삼성 사과하라'…주총 찾은 1600명 개미들"
		},
		{
		"publisher":"KBS",
		"headline":"피해 급증 우크라…젤렌스키 대통령, 결단 내렸다"
		},
		{
		"publisher":"MBC",
		"headline":"중립국 핀란드 변화에…'푸틴, 땅치고 후회할 수도'"	
		}
	]


}

실행화면

저작자표시 비영리

'Front-End > jQuery(ajax)' 카테고리의 다른 글

[ajax & Struts2] 방명록 만들기 (0)	2022.03.18
[Javascript] DOM(Document Object Model) , XML 데이터 가져오기 (0)	2022.03.17
[Ajax] 유효한 ID체크 , 자주 사용하는 Javascript 함수 만들기 (0)	2022.03.17
[Ajax] GET 방식, POST 방식으로 데이터 보내기 (0)	2022.03.17
[JQuery] 세팅 및 jQuery & Ajax를 이용한 텍스트 데이터 전송 (2)	2022.03.15

블로그의 정보

무작정 개발

[Javascript] JSON을 활용해서 javascript 객체 생성하기

'Front-End > jQuery(ajax)' 카테고리의 다른 글

블로그의 정보

활동하기

티스토리툴바

'Front-End > jQuery(ajax)' 카테고리의 다른 글

블로그의 정보

활동하기

공유하기

다른 글

티스토리툴바