14. (jquery/제이쿼리) each 사용해 json 데이터 key , value 데이터 확인 실시

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : jquery

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>    



    <!-- 내부 JS 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다
    	2. each : 객체나 배열에서 모두 사용할 수 있는 범용적인 반복 함수(iterator function)입니다
    	3. each 는 length 속성이 있는 배열이나 배열과 같은 객체를 전달받아, 그 길이만큼 반복해서 콜백함수를 실행합니다
    	4. json 데이터를 출력하기 위해 each(json객체, function(key, value) 형태를 사용합니다    	
    	*/
   	
    	


    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log("");


    		// [이벤트 함수 실행]
    		main();
    	};





    	/* [이벤트 수행 함수] */
    	function main(){
    		console.log("");
    		console.log("[main] : [start]"); 
    		console.log("");

    		//초기 json 객체 선언 실시
    		var jsonOneObj = {"idx" : 1, "name" : "twok", "age" : 28};
    		console.log("");
    		console.log("[main] : [원본] : " + JSON.stringify(jsonOneObj)); 
    		console.log("");


    		//each 사용해 json 데이터 key, value 확인 실시
    		$.each(jsonOneObj, function(key, value){
    			console.log("");
    			console.log("[main] : [key] : " + key);     	
    			console.log("[main] : [value] : " + value);     	
    			console.log("");
    		});
    		
    	};
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다

2. each : 객체나 배열에서 모두 사용할 수 있는 범용적인 반복 함수(iterator function)입니다

3. each 는 length 속성이 있는 배열이나 배열과 같은 객체를 전달받아, 그 길이만큼 반복해서 콜백함수를 실행합니다

4. json 데이터를 출력하기 위해 each(json객체, function(key, value) 형태를 사용합니다

*/

/* =========================== */