JS - Ajax 2:상품 더보기 버튼 만들기

신혜원·2023년 5월 31일
0

JavaScript

목록 보기
32/39
post-thumbnail

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

  1. 버튼 만들기
  2. console.log 로 데이터 잘 가져왔는지 먼저 확인해보기
<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>

가져온 데이터로 카드 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)=>{
        
        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개 등장!


실력향상을 위한 응용문제!! 정답XX

1. 더보기버튼을 2번째 누르면 7,8,9번째 상품을 더 가져와서 html로 보여주십시오
https://codingapple1.github.io/js/more2.json 여기로 GET요청하면 7,8,9번째 상품이 도착합니다.

힌트는 유저가 더보기버튼을 몇 번 눌렀는지를 어디 기록해놔야
내가 버튼 누를 때마다 어디로 GET요청할 지 판단할 수 있겠군요.
그리고 그 다음 10,11,12번 상품은 없으니
버튼을 3번은 못누르게 버튼을 숨기거나 그래도 좋을듯요


2. 유사한 코드가 발생하고 있습니다.

지금 코드를 잘 보면 forEach() 반복문을 2번 쓴 것 같은데
이 코드들이 매우 유사해보입니다.
함수나 그런걸로 축약해보는 연습도 해보면 좋을 것 같군요

힌트는
함수로 축약할 때 안에 미지의 변수같은게 있으면 파라미터로 바꾸는게 좋다고 했는데
a, i 이런 변수는 이미 콜백함수에 의해 파라미터화가 되어있기 때문에 a, i는 신경안써도 될듯요

0개의 댓글