javascript - Nested jQuery each statement runs after the first has completed -

i want dynamically create combo box reading json variable.

the problem first $.each() statement finishes before second $.each() statement.

this makes 2 options fall outside of <select> element.

what doing wrong?

var ofields = {      "fields": [          {"name": "idtipopratica", "label": "id tipo prat.", "type": "hidden", "visible": "true", "disabled": "false"},          {"name": "tipologia", "label": "tipologia", "type": "select", "selectparams": {              "source": "list",              "values": {"cc":"conto corrente","fi":"conto finanziario"}          },"visible": "true", "disabled": "false"}      ]  };  var html = '<form id="editform" method="post" class="form-horizontal">';  $.each(ofields.fields, function (i, object) {      switch(object.type) {          case "select":              html += '<select id="' + object.name + '" name="' + object.name + '"/>';              var selectparams = object.selectparams;              console.log(selectparams);              if (selectparams.source === "table") {                  //console.log(selectparams.keycolumn);              } else {                  $.each(selectparams.values, function(k,v){                      html += '<option value="' + k + '">' + v + '</option>';                      console.log(k+"|"+v);                  });              }              break;          default:              html += '<input type="' + object.type + '" id="' + object.name + '" name="' + object.name + '"/>';      }      html += '</select>';  });  html += '</form>';  $("body").html(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

you've included self-closing flag (/>) on opening tag of select element

html += '<select id="' + object.name + '" name="' + object.name + '"/>'; 

this should be

html += '<select id="' + object.name + '" name="' + object.name + '">'; 

(demo)