데이터바인딩과 for문

 

    <div class="card-group container">
        <div class="card">
          <img src="https://via.placeholder.com/600">
          <div class="card-body">
            <h5>Card title</h5>
            <p>가격 : 70000</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>가격 : 70000</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>가격 : 70000</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' }
        ];

 

 

첫째 상품명을 뽑는 법을 알아봅시다. 

 

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

▲ 어렵게 생긴 자료도 console.log 해보면 쉽게 출력할 수 있다고 했습니다. 

console.log(products) 해보면 [{ }, { }, { }] 이렇게 나옵니다.  

그냥 array 안에 object 3개가 들어있을 뿐입니다.

그래서 저기서 내가 원하는 자료를 뽑고 싶으면 시작 기호만 잘 보면 됩니다.

[ 이거는 array라서 인덱싱하면 됩니다.

 

 

이번엔 console.log(products[0]) 해보면 { id : 0, price : 70000, title : 'Blossom Dress' } 이런게 나옵니다.

{ 이거는 object라서 이름불러주면 됩니다.

여기서 Blossom Dress 뽑으려면 

console.log(products[0].title)

이렇게 쓰면 잘나올듯요 

 

 

 

 

(products 변수 하단)

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; 

이렇게 코드를 작성했더니 카드에 상품명, 가격이 잘 들어가는군요

반복문 이런거 쓰고싶으면 쓰면 됩니다. 

 

 

var a = '안녕';
console.log('문자' + a + '문자');  // '문자안녕문자'출력됨

 

var a = '안녕';
console.log(`문자 ${a} 문자`);  // '문자안녕문자'출력됨

귀찮으면 여러분 키보드 물결기호 밑에 있는 백틱기호 쓰면 됩니다. 

백틱기호도 문자만들어주는데

1. 문자 중간에 엔터키 칠 수 있음

2. 중간에 ${ 변수명 } 문법을 이용가능함

 

${ } 이건 문자안에 변수넣어주는 간단한 문법입니다.

일반 따옴표안에선 사용불가능합니다. 

필요하면 씁시다. 

 

 

 

 

느낀점

for (i = 0, i < 3 , i ++;) {  // 쉼표 , 대신 세미콜론 ; 이 들어가야 함

}

 

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);
}

 

 

• var 대신 let 사용을 추천해. (블록 범위 제한이 명확함)
• 만약 products의 길이가 바뀔 수 있다면 **products.length**를 조건으로 쓰면 더 좋아!