Ajax 요청해서 상품 더보기 버튼 만들기 두번째

[최연진]

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

      /*재사용하기위해 함수 생성*/
      function productsData(data) {
        data.forEach((a, i) => {
          //products[i]를 a로 변경가능
          let temple = `<div class="col-sm-4">
          < img src="https://via.placeholder.com/600" class="w-100" />
          <h5>${a.title}</h5>
          <p>가격 : <span>${a.price}</span></p>
          </div>`;
          let wrap = document.querySelector(".row");
          wrap.insertAdjacentHTML("beforeend", temple);
        });
      }

      /*더보기 버튼 누르기전에 보여지는 상품3개*/
      products.forEach((a, i) => {
        let temple = `<div class="col-sm-4">
          < img src="https://via.placeholder.com/600" class="w-100" />
          <h5>${a.title}</h5>
          <p>가격 : <span>${a.price}</span></p>
          </div>`;
        let wrap = document.querySelector(".row");
        wrap.insertAdjacentHTML("beforeend", temple);
      });

      /*더보기 버튼 눌렀을때 보여지는 상품*/
      let btn = document.querySelector("#more");
      let count = 0;
      btn.addEventListener("click", function () {
        count++; //이벤트 발생시 카운드 플러스

        //버튼 1번 눌렀을때 실행
        if (count == 1) {
          fetch("https://codingapple1.github.io/js/more1.json")
            .then((res) => res.json())
            .then(function (data) {
              productsData(data);
            })
            .catch((error) => {
              console.log("error");
            });
          //버튼 2번 눌렀을때 실행
        } else if (count == 2) {
          fetch("https://codingapple1.github.io/js/more2.json")
            .then((res) => res.json())
            .then(function (data) {
              productsData(data);
              btn.style.display = "none";
            })
            .catch((error) => {
              console.log("error");
            });
        }
      });

이렇게 하였는데요 if문에 count == 1 , count == 2 ... 이렇게되면  목록이 여러개면
계속 if문을 추가해줘야할텐데 이부분이 궁금해서 게시판 질문글에서 찾아봤는데
선생님께서 
버튼누를 때 'more' + count + '.json' 으로 get요청하면 될듯요  

이렇게 답변 남겨주셨는데 이부분을 어느쪽에 어떻게 써야하는건가요? 
자세히 알려주시면 감사하겠습니다 !

[codingapple]

'more1.json' 하드코딩된 부분을  'more' + count + '.json'  로 바꿉시다

[최연진]

      fetch('https://codingapple1.github.io/js/"more" + count + ".json"')
          .then((res) => res.json())
          .then(function (data) {
            productsData(data);
          })
          .catch((error) => {
            console.log("error");
          });

이부분을 if문 다 지우고 이렇게 바꾸면 된다는 말씀이실까요?
이렇게 했는데 안됩니다,,


총 코드는 이렇게 수정하였습니다 ...! 

    var products = [
        { id: 0, price: 70000, title: "Blossom Dress" },
        { id: 1, price: 50000, title: "Springfield Shirt" },
        { id: 2, price: 60000, title: "Black Monastery" },
      ];
      /*재사용하기위해 함수 생성*/
      function productsData(data) {
        data.forEach((a, i) => {
          //products[i]를 a로 변경가능
          let temple = `<div class="col-sm-4">
          < img src="https://via.placeholder.com/600" class="w-100" />
          <h5>${a.title}</h5>
          <p>가격 : <span>${a.price}</span></p>
          </div>`;
          let wrap = document.querySelector(".row");
          wrap.insertAdjacentHTML("beforeend", temple);
        });
      }

      /*더보기 버튼 누르기전에 보여지는 상품3개*/
      products.forEach((a, i) => {
        let temple = `<div class="col-sm-4">
          < img src="https://via.placeholder.com/600" class="w-100" />
          <h5>${a.title}</h5>
          <p>가격 : <span>${a.price}</span></p>
          </div>`;
        let wrap = document.querySelector(".row");
        wrap.insertAdjacentHTML("beforeend", temple);
      });

      /*더보기 버튼 눌렀을때 보여지는 상품*/
      let btn = document.querySelector("#more");
      let count = 0;
      btn.addEventListener("click", function () {
        count++; //이벤트 발생시 카운드 플러스

          fetch("https://codingapple1.github.io/js/"more" + count + ".json"")
            .then((res) => res.json())
            .then(function (data) {
              productsData(data);
            })
            .catch((error) => {
              console.log("error");
            });
      });

[codingapple]

fetch("https://codingapple1.github.io/js/more" + count + ".json")
합시다 

[글쓴이]

글