쇼핑몰 상품진열 기능 만들기 (array of objects 다루기)

[이후경]

안녕하세요 

해당 수업 시간에 어레이의 오브젝트를 화면에 출력하다가 오류가 떠서 질문글 올립니다.

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

const title = document.querySelectorAll(".card-body h5");
const price = document.querySelectorAll(".card-body p span");

 

for (i = 0; i <= products.length; i++) {
$(title).eq(i).html(products[i].title);  <--!  여기부분입니당 
$(price).eq(i).html(products[i].price);
}

반복되는 부분이니 반복문을 사용했고 화면상에 나오는건 문제가 없지만 ( 반복문 미사용 시 문제 없음)

콘솔창에 Uncaught TypeError: Cannot read properties of undefined (reading 'title')라는 오류가 뜹니다. 

그 뒤에 새로 작성한 

var 어레이 = [2, 3, 5, 7, 1, 4, 8];
어레이.sort();부분부터는 콘솔에서도 따로 출력이 되지 않아요.
질문 전에 구글에 검색해봤지만 그 해결 방안조차 무슨 뜻인지 이해가 잘 안가 도움 요청드립니다. 

[codingapple]

일단 반복문에 var 혹은 let 키워드가 빠진듯요 

[이후경]

악 ㅋㅋㅋㅋㅋㅋㅋ 저기도 틀렸군요 하지만 수정해도 여전히 같은 오류가 나네요 또르륵 ... function 화면출력() {
  for (let i = 0; i <= products.length; i++) {
    $(title).eq(i).html(products[i].title);  <-- title 이부분!
    $(price).eq(i).html(products[i].price);
  }
}

음.... 그래도 가격정렬이나 오만원제품 보기 등등 버튼은 다 잘됩니당 

다만 콘솔창에서 빨간색이 하나씩 늘어나요 하하

일단 완강 후에 다시 한번 처음부터 해보도록 하겠습니다 감사합니당 

[codingapple]

자바스크립트 셀렉터로 찾은걸 jquery에 넣어버려서 그런 것 같군요

[글쓴이]

글