자바스크립트 코드 짜서 카드3개 생성하기

<div class="row"></div>

    <!-- 제이쿼리 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

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

      products.forEach((a, i) => {
        var 템플릿 = `<div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${products[i].title}</h5>
        <p>가격 : ${products[i].price}</p>
      </div>`;
        $(".row").append(템플릿);
      });
    </script>

상품 더보기 버튼누르면 상품3개 가져오기

버튼하나 만들고 그거 누르면 상품을 더 가져와봅시다.
https://codingapple1.github.io/js/more1.json 여기로 GET요청하면 상품 3개 데이터를 보내줍니다.
버튼누르면 상품데이터 가져와서 콘솔창에 출력해보십시오.

<div class="container">
  <button class="btn btn-danger" id="more">더보기</button>
</div>

<script>
  $('#more').click(function(){
    $.get('https://codingapple1.github.io/js/more1.json')
      .done((data)=>{
        console.log(data)
      });
  });
</script>

html에 버튼하나 만들고
이거 누르면 저기로 get요청해서 성공하면 가져온 결과 콘솔창에 출력하라고 했더니
잘 출력됩니다.

가져온 데이터로 카드 3개 만들기

버튼누르면 데이터는 잘 가져오고 있는데
가져온 데이터로 카드레이아웃을 3개 더 만들어봅시다.
그래서 버튼 누르면 카드레이아웃이 3개 더 생성되면 성공입니다.
그리고 더 가져온 상품제목, 가격도 html에 잘 박혀있으면 됩니다.

<div class="container">
  <button class="btn btn-danger" id="more">더보기</button>
</div>

<script>
  $('#more').click(function(){
    $.get('https://codingapple1.github.io/js/more1.json')
      .done((data)=>{
        
        data.forEach((a, i)=>{
          var 템플릿 = 
          `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${data[i].title}</h5>
            <p>가격 : ${data[i].price}</p>
          </div>`;
          $('.row').append(템플릿)
        })
        
      });
  });
</script>

.done() 안에 카드 3개를 추가해달라고 코드를 짰습니다.
카드 레이아웃 만들고 그걸 append() 하는 코드를 3번 반복했더니 카드3개 생김
data[0].title 이것도 제목란에 잘 끼워넣어봤습니다.