221013 Donnerstag - 데이터바인딩/array/object

데이터바인딩 하기를 배웠다.

 

데이터바인딩 Data Binding
: html에 데이터 꽂기 및 동기화 (client-side rendering, 반: server-side rendering)

 

위 모습을 만들기 위한 html은 다음과 같다

<div class="card-group container">
	<div class="card">
		<img src="https://via.placeholder.com/600">
		<div class="card-body">
			<h5>Card title</h5>
			<p>가격 : ??</p>
			<button class="btn btn-danger">주문하기</button>
		</div>
	</div>
	<div class="card">
		<img src="https://via.placeholder.com/600">
		<div class="card-body">
			<h5>Card title</h5>
			<p>가격 : ??</p>
			<button class="btn btn-danger">주문하기</button>
		</div>
	</div>
	<div class="card">
		<img src="https://via.placeholder.com/600">
		<div class="card-body">
			<h5>Card title</h5>
			<p>가격 : ??</p>
			<button class="btn btn-danger">주문하기</button>
		</div>
	</div>
</div>

다음의 자료를 데이터바인딩 하고자 한다. 

<script>
	var products = [
		{ id : 0, price : 70000, title : 'Blossom Dress' },
		{ id : 1, price : 50000, title : 'Springfield Shirt' },
		{ id : 2, price : 60000, title : 'Black Monastery' }
	];
</script>

 

위 products의 구조를 살펴보면 [ { }, { }, { } ]

object자료형 { } 3개를 포함하고 있는 array자료형 [ ]임을 알 수 있다.

 

array자료형 [ ]은 value만을 담고있는 반면,
object자료형 { }은 key:value를 담고있다는 차이가 있다. 

 

데이터바인딩을 할 각 부분이

products 변수의 몇 번째 object인지, 해당 object에서 원하는 value의 key는 무엇인지 확인하여 꽂아주면 된다.

<script>
	document.querySelectorAll('.card-body h5')[0].innerHTML = products[0].title;
	document.querySelectorAll('.card-body p')[0].innerHTML = '가격: '+products[0].price+'원';
	document.querySelectorAll('.card-body h5')[1].innerHTML = products[1].title;
	document.querySelectorAll('.card-body p')[1].innerHTML = '가격: '+products[1].price+'원';
	document.querySelectorAll('.card-body h5')[2].innerHTML = products[2].title;
	document.querySelectorAll('.card-body p')[2].innerHTML = '가격: '+products[2].price+'원';
</script>

document.querySelectorAll('.card-body h5')는 클래스명이 card-body인 자식 중에 h5인 것을 뜻한다. 

 

 

jQuery와 for문을 활용해 코드를 좀더 간단하게 만들 수도 있다.

//jQuery
for (let i=0; i<products.length; i++) {
	$('.card-body h5').eq(i).html(products[i].title);
	$('.card-body p').eq(i).html(products[i].price);
}

 

 

코드 실행 결과 다음의 모습을 확인할 수 있다~