티스토리 뷰

728x90
반응형
$(function(){
	const $members = [
	    {"name":"홍길동","blood":"O형"},
	    {"name":"강감찬","blood":"B형"},
	    {"name":"이순신","blood":"O형"},
	    {"name":"유관순","blood":"O형"},
	    {"name":"안중근","blood":"AB형"},
	    {"name":"김동주","blood":"A형"}
	];
console.log($members[0]); //name:'홍길동',blood:'0형'
console.log($members[0]["blood"]); //0형

$.each($members[0],function($a,$b){
	console.log($a);//name,blood
});

$.each($members,function($a,$b){
	console.log($a);//0,1,2,3,4,5
	console.log($members[$a]["name"]);//이름값 모두 출력(1줄씩)
	console.log($members[$a]["blood"]);//혈액값 모두 출력(1줄씩)
});
var $htmlcode ="";
var $oricode = $("#userlist").html(); //기존에 작성된 html코드를 가져옴
$.each($members,function($a,$b){
	var $user = $members[$a]["name"];//[$a]:key값.but key값이 없으므로 $a는 인덱스넘버 0,1,2,3,4,5
	console.log($user); //이름모두 출력 (1줄씩). 0번지~5번지의 name값 
	var $blood = $members[$a]["blood"];
	$htmlcode +="<tr>\
	<td>"+$user+"</td>\
	<td>"+$blood+"</td>\
	</tr>";
});

$htmlcode = $oricode + $htmlcode; //완전체코드 = 기존코드 + 반복문으로 생성된 코드 
$("#userlist").html($htmlcode); //완전체코드 출력

$.map($members,function($a,$b){ //배열값,키값
	console.log($a);//모든 배열값
	console.log($b);//0,1,2,3,4,5
	$($members[$a]).each(function($aa,$bb){ //키값, 배열값
		console.log($bb);
	});
});

$(Object.keys($members)).each(function($a,$b){ 
		console.log($a);//0,1,2,3,4,5
		console.log($b);//0,1,2,3,4,5
	$.each($members,function($aa,$bb){ //키값, 배열값
		console.log($aa); //(0,1,2,3,4,5)*5번
		console.log($bb); //(name:'홍길동'blood:'b형'....모든 값)*5번
		});
	});
});
728x90
반응형

'Frontend > Jquary' 카테고리의 다른 글

JQ - each, map, Object.keys() (1)  (0) 2023.01.02
JQ 중급 - FAQ만들기  (1) 2023.01.02
JQ 중급 - 메뉴만들기  (0) 2023.01.02
JQ 애니메이션  (0) 2023.01.02
JQ 기본 3  (0) 2023.01.02
댓글
250x250
반응형
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday