[코딩애플;JS]array와 object /데이터바인딩

💡조금 복잡한 자료를 다룰 때

 var car2 = { name : '소나타', price : [50000, 3000, 4000] } ;

 

 

이렇게 object 자료 안에 배열이 들어가 있다면

당황하지 말고 차례대로 적어주면 됨

예를 들어 price키의 2번째, 3000이라는 값을 부르고 싶으면

car2.pirce[1]

이런식으로!

 

💡이렇게 객체나 배열에 있는 자료들을 html에 넣어주는걸 데이터 바인딩이라고 함!

     매번 바뀌는 값의 경우 일일히 변수처리 하기도 어렵고, html에서 마크업하기도 어렵기 때문에

     JS로 데이터를 넣어주는 것.

 

💡server-side-randering: 이미 완성되어 있는 html에 데이터만 뿌려서 전송하는것

     client-side-randering: 빈 html과 JS가 html을 완성시키는코드로 전송하는 것. ⭐요즘은 이게 대세

 

📒숙제!

해당 가격부분에 각각 데이터 넣어보기!

  <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 src="https://code.jquery.com/jquery-3.7.1.min.js"

      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="

      crossorigin="anonymous"></script>

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

      <script>

        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(products[0].price)

        var card = document.querySelectorAll('.card-body');

        for (let i = 0; i < card.length; i++){ //card-body 갯수만큼!

            card[i].querySelector('p').innerHTML = products[i].price;

           //card-body안에 p가 가격자리니까 각각 순서대로 가격값을 넣어줌

            card[i].querySelector('h5').innerHTML = products[i].title;

           //card-body안에 h5가 타이틀자리니까 각각 순서대로 가격값을 넣어줌

        }

       

      </script>

 

 

⚠️문자 중간에 변수 넣는법

1)'문자'+변수+'문자'

2) 백틱기호 사용해 보기 : `문자 ${a} 문자`