Динамическое заполнение выпадающего меню с именем массива 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

У вас должно быть 2 типа объектов в этом 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++; 
     }); 
    });  
});