루로그

7. 배열 값 데이터바인딩 본문

STUDY/JavaScript, jQuery 입문과 웹 UI개발

7. 배열 값 데이터바인딩

강력한루야 2022. 8. 30. 17:43

쇼핑몰 레이아웃에 상품 정보 넣어보기

  • 가격, 글자순 정렬 및 5만원 이하 상품 보기 버튼
  • sort() 정렬을 이용한 가격, 글자순 정렬
  • filter() 함수를 이용한 5만원 이하 상품 걸러내기
  • 가벼운 데이터바인딩 연습
💡TIP sort()는 기존 배열을 변형시키지만 filter(), map()은 변형시키지 못하므로 새로운 변수를 선언 후 대입

 

<!doctype html>
<html lang="ko">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <title>인터렉티브 form</title>
    
    <style>     
        .sizebox {display:none} 
    </style>
  
  </head>
  <body>
    <div class="card-group container">
      <div class="card c0">
        <img src="https://via.placeholder.com/600">
        <div class="card-body">
          <h5>상품명</h5>
          <p>가격</p>
          <button class="btn btn-danger">주문하기</button>
        </div>
      </div>
      <div class="card c1">
        <img src="https://via.placeholder.com/600">
        <div class="card-body">
          <h5>상품명</h5>
          <p>가격</p>
          <button class="btn btn-danger">주문하기</button>
        </div>
      </div>
      <div class="card c2">
        <img src="https://via.placeholder.com/600">
        <div class="card-body">
          <h5>상품명</h5>
          <p>가격</p>
          <button class="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
    
    <div class="container my-4">
        <button class="btn-danger btn pricebtn">가격순정렬</button>
        <button class="btn-danger btn stepbtn">글자순정렬</button>
        <button class="btn-danger btn removebtn">5만원이하 상품보기</button>
    </div>
    


    <!--스크립트-->
    <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


    <script>        

        // sort 정렬 사용법 (오름차순)
        var 어레이 = [7,3,5,2,40];

        어레이.sort(function(a,b){
            return a-b  //내림차순은 b-a
        });


        // 상품정보 배열
        var products = [
            { id : 0, price : 70000, title : 'Blossom Dress' },
            { id : 1, price : 50000, title : 'Springfield Shirt' },
            { id : 2, price : 30000, title : 'Black Monastery' }
          ]


        // 상품정보 배열 값으로 데이터바인딩
        for (i=0;i<3;i++) //i는 0이고 3 미만이며 1씩 커질 때 i만큼 다음을 반복해라
        {$('.c'+i+' h5').html(products[i].title); //'.c'i의 h5 안에 products[i].title 값을 덮어씌워라
         $('.c'+i+' p').html('가격 : ' + products[i].price); //'.c'i의 p 안에 products[i].price 값을 덮어씌워라
        }


        // 상품 가격순정렬
        $('.pricebtn').click(function(){ //가격순정렬 버튼을 클릭하면
            products.sort(function(a,b){ //products를 다음과 같이 정렬해라
                return a.price - b.price // 배열.price 값으로 비교해서
            });

            for (i=0;i<3;i++) //정렬한 배열로 새로 데이터바인딩 하기
            {$('.c'+i+' h5').html(products[i].title);
             $('.c'+i+' p').html('가격 : ' + products[i].price);
            }
        });


        // 상품 글자순정렬
        $('.stepbtn').click(function(){ //가격순정렬 버튼을 클릭하면
            products.sort(function(a,b){ //products를 다음과 같이 정렬해라
                return a.title < b.title ? -1 : a.title > b.title ? 1 : 0; //오브젝트 문자열 오름차순 정렬
            });

            for (i=0;i<3;i++) //정렬한 배열로 새로 데이터바인딩 하기
            {$('.c'+i+' h5').html(products[i].title);
             $('.c'+i+' p').html('가격 : ' + products[i].price);
            }
        });




        // filter 함수 사용법
        var 필터목록 = [7,3,5,2,40]
        var 걸러진필터목록 = 필터목록.filter(function(a){  //sort()는 기존 배열을 변형시키지만 filter()는 변형시키지 못하므로 새로운 이름으로 변수를 선언 후 대입해줘야 함
                            return a < 4 // 필터링 할 조건식
                        });
        
        
        // 5만원이하 상품보기
        $('.removebtn').click(function(){ // 5만원이하 상품보기 버튼을 클릭하면
            var 걸러진상품 = products.filter(function(a){ // 변수 걸러진 상품에 products를 다음과 같이 필터링 해 대입해라
                            return a.price <= 50000 // 배열.price 값이 50000 이하일 경우
                         });

            $('.card p').html('가격 : --'); //.card p 속 마크업을 '가격 : --'으로 덮어씌워라
            $('.card h5').html('상품없음'); //.card h5 속 마크업을 '상품없음'으로 덮어씌워라


            //필터링한 배열로 새로 데이터바인딩 하기
            for (i=0;i<걸러진상품.length;i++) //i는 0이고 변수 걸러진상품의 개수 미만이며 1씩 커질 때 i만큼 다음을 반복해라
            {$('.c'+i+' h5').html(products[i].title);
             $('.c'+i+' p').html('가격 : ' + 걸러진상품[i].price);
            }
        });



        // map 함수 사용법
        var 맵 = [7,3,5,2,40];
        var 뉴맵 = 맵.map(function(a){  //기존 array를 조작한 새로운 array를 만들 때 사용, filter()함수처럼 새 변수 선언이 필요,
          return a * 2
        })

    </script>
  </body>
</html>
인터렉티브 form
상품명

가격

상품명

가격

상품명

가격

코딩애플 강의로 실습한 내용입니다
출처 : https://codingapple.com/
반응형

'STUDY > JavaScript, jQuery 입문과 웹 UI개발' 카테고리의 다른 글

9. Typewriting 애니메이션 만들기  (0) 2022.08.30
8. Ajax로 서버에서 정보 받아오기  (0) 2022.08.30
6. 인터랙티브 폼 만들기  (0) 2022.08.30
5. animate와 간단한 폼 검사  (0) 2022.08.30
4. 반복문 활용하여 tab기능 만들기  (0) 2022.08.30
'STUDY/JavaScript, jQuery 입문과 웹 UI개발' Related Articles more