JSON 배열 이름이있는 드롭 다운 메뉴를 동적으로 채 웁니다.

Question

개체 카테고리 이름이있는 드롭 다운 메뉴를 채 웁니다. 소리는 간단하지만 이것을 이해할 수는 없습니다. 도와주세요. 예를 들어

:

JSON

window.cars = 
{ 

"compact": 

[ 
{ "title": "honda", 
     "type": "accord", 
     "thumbnail": "accord_t.jpg", 
     "image": "accord_large.jpg" }, 
{ "title": "volkswagon", 
     "type": "rabbit", 
     "thumbnail": "rabbit_t.jpg", 
     "image": "volkswagon_large.jpg" } 
], 

"trucks": 

[ 
{ "title": "Ford", 
    "type": "f-150", 
    "thumbnail": "ford_t.jpg", 
    "image": "chevy_large.jpg" }, 
{ "title": "GMC", 
     "type": "silverado", 
     "thumbnail": "gmc_t.jpg", 
     "image": "gmc_large.jpg" } 
] 
}; 

그래서 "소형"와 "트럭"드롭 다운 메뉴를 채울 것입니다.

HTML + JQUERY

$.each(cars, function(k, v){ 

$('select').append('<option value="' + k + '">' + k + '</option>'); 

}); 

} 

어떤 아이디어가 왜 작동하지 않습니다?

미리 감사드립니다.

Answer 1

JSON에는 두 가지 유형의 객체가 있어야합니다. 당신은 그렇게함으로써 요소를 채울 수 있습니다 :

$(function(){ 
    window.cars = {...}; // JSON 

    $.each(cars['compact'], function(k, v){ 
     $('select').append('<option value="' + k + '">' + v.title + '</option>'); 
    });  
}); 

를 아니면 두 객체를 사용해야하는 경우, 당신은 모든 객체 배열 내에서 유사한 속성을 포함한다고 가정 (각 하나를 통해 루프가

$(function(){ 
    window.cars = {...}; // JSON 

    var index = 0; 
    $.each(cars, function(k, v){ 
     $.each(v, function(i, obj){ 
      $('select').append('<option value="' + index + '">' + obj.title + '</option>'); 
      index++; 
     }); 
    });  
});