Jquery ajax populate dropdown with json response data

Question

I know there are quite a few questions floating on this but I\'m still not sure what to do.

I have a HTML form called \"CuisineForm\", after the user selects the type o

Answer 1

Heres a fiddle that contains the full answer

HTML:

JS:

var data = {"breakfast":[{"09:00:00":"9:00 am"},{"09:30:00":"9:30 am"}],"lunch":        [{"12:00:00":"12:00 pm"},{"12:30:00":"12:30 pm"}],"dinner":[{"19:00:00":"7:00 pm"},{"19:30:00":"7:30 pm"}]};

// Put this code inside of the "done callback"
var $elements = $('#breakfast, #lunch, #dinner');
$.each(data, function (dataKey, dataVal) {
    $elements.each(function(domElKey, domElVal){
        if (dataKey === domElVal.id) {
            $.each(dataVal, function(timeKey,timeVal){
                $.each(timeVal,function(timePropKey, timePropVal){
                $(domElVal).append(""+timePropVal+"");
                });
            })
       }
    });
}); 

A fiddle that contains the answer