인턴 생활 ) 검색 기능 만들기

JSON =  JavaScript Object Notation

 

 

HTML

<div>

  <input id="search_input" type="text">

  <button onclick="inputValue()">검색</button>

  <div class="search_result_box">

      <p class="search_result_text"></p>

  </div>

</div>

 

JS

const 과일리스트 = [

  { 사과: [

      { name: "사과",

        place: "2000원",

        color: "빨간색", },

    ],  },

  { 바나나: [

      { name: "바나나",

        place: "2000원",

        color: "노란색", },

    ], },

  {  복숭아: [

      { name: "복숭아",

        place: "1000원",

        color: "핑크색", },

    ], },

  {  딸기: [

      { name: "딸기",

        place: "12000원",

        color: "노란색",  },

    ],  },

];

 

function inputValue(){

  const inputValue = document.querySelector('#search_input').value; //input 데이터 가져오기

  const p = document.querySelector('.search_result_text'); //데이터가 들어갈 변수

  //input 데이터와 배열 데이터 비교

  switch(inputValue){

    case "사과" :  

      //JSON.stringify() 객체 값을 출력하고 싶을 때 >> 객체를 JSON 문자열로 변환 해주는 함수

      //Object.keys() = 객체의 속성들을 뽑아서 배열로 반환하는 메서드

      //[Object.keys(과일리스트)[i]]= i번째 과일의 속성값

      p.innerHTML = JSON.stringify(과일리스트[Object.keys(과일리스트)[0]]);

      break;

      case "바나나" :

      p.innerHTML = JSON.stringify(과일리스트[Object.keys(과일리스트)[1]]);

      break;

      case "복숭아" :

      p.innerHTML = JSON.stringify(과일리스트[Object.keys(과일리스트)[2]]);

      break;

      case "딸기" :

      p.innerHTML = JSON.stringify(과일리스트[Object.keys(과일리스트)[3]]);

      break;

      default :

      alert ("판매하지 않는 과일입니다.")

    }

  };

 

 

 

 

결과물