웹개발 예제

 document.querySelectorAll(".card-layout")[0].innerHTML = "";

fetch("./store.json")
 .then((res) => res.json())
 .then((data) => {
// console.log(data.products[0].title.includes(인풋값));
 data.products.forEach((a, i) => {
if (
 data.products[i].title.includes(인풋값) == true &&
 인풋값.length >= 1
 ) {
let 템플릿 = ` <div class="card">
 < img src="./images/${data.products[i].photo}" alt="img1" />
 <div class="card-content">
 <h4>${data.products[i].title}</h4>
 <p>${data.products[i].brand}</p>
 <p>${data.products[i].price} 원 </p>
 </div>
 <button>담기</button>
 </div>
 </div>`;
 document
 .querySelectorAll(".card-layout")[0]
 .insertAdjacentHTML("beforeend", 템플릿);
 }
 });
 });
 });

//
</script>

Input 에 상품명 검색하면 찾아주는 코드 작성하고 있습니다. 

우선 잘 작동하는데 

보기와 같이 식기 까지 작성하면 하나가 잘나오는데 식기세 까지 작성하면 두개의 상품이 나옵니다 . 이유를 알 수 있을까요 ?