select option에 따라 json파일의 일부분만 받고싶어요

Question

지금은 json에 저장된 이미지가 전부 다뜨는데option선택에 따라 json파일 temperature값이 다른 이미지만 나타났으면 좋겠어요 예를들어 option value = 4 를 선택할경우temperature: "4"인 image가 뜨게하고싶은데 방법이 없을까요....?const items = [ { name: "4_img_1", temperature: "4", image: "../../assets/attire/4_img_1.jpg", }, { name: "4_img_2", temperature: "4", image: "../../assets/attire/4_img_2.jpg", }, { name: "4_img_3", temperature: "4", image: "../../assets/attire/4_img_3.jpg", }, { name: "4_img_4", temperature: "4", image: "../../assets/attire/4_img_4.jpg", }, { name: "4_img_5", temperature: "4", image: "../../assets/attire/4_img_5.jpg", }, { name: "4_img_6", temperature: "4", image: "../../assets/attire/4_img_6.jpg", }, { name: "4_img_7", temperature: "4", image: "../../assets/attire/4_img_7.jpg", }, { name: "4_img_8", temperature: "4", image: "../../assets/attire/4_img_8.jpg", }, { name: "4_img_9", temperature: "4", image: "../../assets/attire/4_img_9.jpg", }, { name: "4_img_10", temperature: "4", image: "../../assets/attire/4_img_10.jpg", }, { name: "4_img_11", temperature: "4", image: "../../assets/attire/4_img_11.jpg", }, { name: "4_img_12", temperature: "4", image: "../../assets/attire/4_img_12.jpg", }, { name: "4_img_13", temperature: "4", image: "../../assets/attire/4_img_13.jpg", }, { name: "4_img_14", temperature: "4", image: "../../assets/attire/4_img_14.jpg", }, { name: "4_img_15", temperature: "4", image: "../../assets/attire/4_img_15.jpg", }, { name: "4_img_16", temperature: "4", image: "../../assets/attire/4_img_16.jpg", }, { name: "5_img_1", temperature: "5", image: "../../assets/attire/5_img_1.jpg", }, { name: "5_img_2", temperature: "5", image: "../../assets/attire/5_img_2.jpg", }, { name: "5_img_3", temperature: "5", image: "../../assets/attire/5_img_3.jpg", }, { name: "5_img_4", temperature: "5", image: "../../assets/attire/5_img_4.jpg", }, { name: "5_img_5", temperature: "5", image: "../../assets/attire/5_img_5.jpg", }, { name: "5_img_6", temperature: "5", image: "../../assets/attire/5_img_6.jpg", }, { name: "5_img_7", temperature: "5", image: "../../assets/attire/5_img_7.jpg", }, { name: "5_img_8", temperature: "5", image: "../../assets/attire/5_img_8.jpg", }, { name: "5_img_9", temperature: "5", image: "../../assets/attire/5_img_9.jpg", }, { name: "5_img_10", temperature: "5", image: "../../assets/attire/5_img_10.jpg", }, { name: "5_img_11", temperature: "5", image: "../../assets/attire/5_img_11.jpg", }, { name: "5_img_12", temperature: "5", image: "../../assets/attire/5_img_12.jpg", }, { name: "5_img_13", temperature: "5", image: "../../assets/attire/5_img_13.jpg", }, { name: "5_img_14", temperature: "5", image: "../../assets/attire/5_img_14.jpg", }, { name: "5_img_15", temperature: "5", image: "../../assets/attire/5_img_15.jpg", }, { name: "5_img_16", temperature: "5", image: "../../assets/attire/5_img_16.jpg", }, { name: "9_img_1", temperature: "9", image: "../../assets/attire/9_img_1.jpg", }, { name: "9_img_2", temperature: "9", image: "../../assets/attire/9_img_2.jpg", }, { name: "9_img_3", temperature: "9", image: "../../assets/attire/9_img_3.jpg", }, { name: "9_img_4", temperature: "9", image: "../../assets/attire/9_img_4.jpg", }, { name: "9_img_5", temperature: "9", image: "../../assets/attire/9_img_5.jpg", }, { name: "9_img_6", temperature: "9", image: "../../assets/attire/9_img_6.jpg", }, { name: "9_img_7", temperature: "9", image: "../../assets/attire/9_img_7.jpg", }, { name: "9_img_8", temperature: "9", image: "../../assets/attire/9_img_8.jpg", }, { name: "9_img_9", temperature: "9", image: "../../assets/attire/9_img_9.jpg", }, { name: "9_img_10", temperature: "9", image: "../../assets/attire/9_img_10.jpg", }, { name: "9_img_11", temperature: "9", image: "../../assets/attire/9_img_11.jpg", }, { name: "9_img_12", temperature: "9", image: "../../assets/attire/9_img_12.jpg", }, { name: "9_img_13", temperature: "9", image: "../../assets/attire/9_img_13.jpg", }, { name: "9_img_14", temperature: "9", image: "../../assets/attire/9_img_14.jpg", }, { name: "9_img_15", temperature: "9", image: "../../assets/attire/9_img_15.jpg", }, { name: "9_img_16", temperature: "9", image: "../../assets/attire/9_img_16.jpg", }, ]; //템플릿 (객체 갯수만큼 템플릿이 반복됨) function itemTemplate(item) { return ` ` } //셀렉트박스 document.querySelector(".select").innerHTML = ` ` //imgbox안에 들어갈 내용 (템플릿과 연결) document.getElementById("imgBox").innerHTML = ` ${items.map(itemTemplate).join("")} ` //temperature 셀렉트별 이미지 띄우기 function selects(s){ if(s.value==4){ //내용 }else if(s.value==5){ //내용 }else{ //내용 } }

Myoungdo Park · Accepted Answer

선택된 temperature 값으로 필터링한 리스트를 별도의 변수로 저장해두고, 이 변수를 기준으로 imgBox 를 재업데이트해 주면 될 것 같네요. //temperature 셀렉트별 이미지 띄우기 function selects(s){ filtered_items &#61; items.filter(i &#61;> i.temperature &#61;&#61;&#61; s.value); // itemBox 삭제 & 재생성 }

select option에 따라 json파일의 일부분만 받고싶어요

1개의 답변

#onchange 목록