🌱 dailyStep
221013 Donnerstag - 데이터바인딩/array/object
Arendt
2022. 10. 14. 06:47
데이터바인딩 하기를 배웠다.
데이터바인딩 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);
}
코드 실행 결과 다음의 모습을 확인할 수 있다~
