선택 옵션 값을 기준으로 div에 JSON 데이터로드

Question

사용자가 선택한 옵션을 기반으로하는 JSON 파일에서 데이터를로드하려고합니다. 나는 그것이 효과가 있지만 훨씬 더 효율적으로 쓰여질 수 있고 시작할 수있는 좋은 곳을 찾는 데 어려움을 겪고 있음을 안다. 아래 코드 예제를 포함 시키겠다.하지만 선택한 국가를 기반으로 여러 카운티를 이끌고있다. 당신은 올바른 데이터를로드하기 위해 else if 문으로 각 값을 검사하고 있음을 알 수 있습니다. 나는 필요한 것을 로딩 할 수있는 방법이 있어야한다고 확신한다.

HTML :

<select id='test-select'> 
    <option>AL</option> 
    <option>AK</option> 
    <option>AZ</option> 
</select> 

JS :

var cities = []; 
    $.getJSON('/assets/shared/misc/counties.json', function(json) { 
     // push json to data to cities array 
     cities.push(json); 

     // map over each item item 
     $('.state-names').map(function(index) { 

      // load in json data based off of select option 
      $('#test-select').on('change', function() { 
       var target = $('#test-select option:selected').val(); 
       console.log(target); 
       if (target == 'AL') { 
        $('.state-names').text(cities[0].AL); 
       } else if (target == 'AK') { 
        $('.state-names').text(cities[0].AK); 
       } else if (target == 'AZ') { 
        $('.state-names').text(cities[0].AZ); 
       } else if (target == 'AR') { 
        $('.state-names').text(cities[0].AR); 
       } // end else if block 
      }); // end test select function 
     }); // end map function 

     console.log(cities); 

    }); // end getJSON call 

이 그냥 압축 된 버전이지만, 기본적으로 더 많은 옵션이 플러스이고 다른 경우의. 너무 많은 호출을하지 않고도 JSON 파일의 키와 일치하는 상태로 인덱스를 설정하는 방법이 있습니까? 어떤 도움이라도 대단히 감사합니다. 중요한 세부 사항을 빠뜨린 경우 더 많은 정보를 확실히 공유 할 수 있습니다. 고마워.

Answer 1

당신은 단순히 속성 이름으로 target의 값을 사용할 수 있습니다

$('.state-names').text(cities[0][target]); 

이 Access/process (nested) objects, arrays or JSON