[javascript] 18. Array & Object -> 데이터 바인딩

📢 Array 자료형

• 여러가지 자료를 한곳에 저장하고 싶을 때 사용하는 자료형
• 순서가 존재해서 인덱싱 가능

var car = ['소나타', 50000, 'white'];

수정/자료 추가

car[1] = 60000;
console.log(car[1]);

📢 Object 자료형

• 여러가지 자료를 한곳에 저장하고 싶을 때 사용하는 자료형
• 순서가 없어서 인덱싱 불가능

var car2 = { name : '소나타', price : 50000 };

수정/ 자료 추가

car2['name'] = '그랜저';
console.log(car2['name']);

🌱 연습 - 데이터바인딩

1. car2 값들을 상품명, 가격에 데이터 바인딩

<div class="container mt-3">
  <div class="card p-3">
    <span class="car-title">상품명</span>
    <span>가격</span>
  </div>
</div> 
<script>
var car2 = { name: '소나타', price: 50000 }
$('.name').html(car2.name)
$('.price').html(car2.price)
</script>

2. list.html 만들어서 상품 카드 3개 만들고 데이터 바인딩

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

반복문을 상용해서 products 수만큼 반복하도록 했다

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

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

🤔 $('.card-body .title') 을 쓴 이유

( $('. .title')도 동작함 )

원래 $('.title')로 했었지만 반복문이 동작하지 않았다

이유
$('.title')에 해당하는 값이 3개인데 인덱싱을 해주지 않아서 모든 타이틀을 선택해서 반복해주지 않고 첫번째 타이틀만 계속 반복문을 통해 변경해주어 title:'Black Monastery' 이 되었던 것이다

➡️ card div 처럼 반복되는 요소가 있는 경우, 자바스크립트로는 querySelectorAll()[i] jquery로는 $().eq(i) 로 인덱싱을 해주어야 한다