Looping through a nested JSON object based on Drop Downs
In answer to http://stackoverflow.com/questions/22401890/looping-through-a-nested-json-object-based-on-drop-downs
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<select id="gameTypeCombo">
<option value="">Choose One</option>
<option value="0">RPG</option>
<option value="1">Other</option>
</select>
<select id="publisher">
</select>
JavaScript
var info = {
"games": [{
"gameType": "RPG",
"publishers": [{
"publisher": "Square"
}]
},{
"gameType": "Other",
"publishers": [{
"publisher": "Square"
}]
},{
"gameType": "Other",
"publishers": [{
"publisher": "Someone"
}]
}]
};
$('select#gameTypeCombo').on('change', function(e) {
var $elem = $(this);
var index = $elem.val();
var getPublisher = _.pluck(info.games[index].publishers, 'publisher');
var preparePublisher = _.map(getPublisher, function(val){ return '<option>' + val + '</option>';}).join();
$('select#publisher').html (preparePublisher);
});