从JSON数据动态生成javascript中的下拉列表

我已经生成了一个表单并将其存储到JS变量中，但问题是我想生成一个下拉列表。该下拉列表的数据以数组的形式存在于JSON中。我尝试使用for循环来计算值，但没有成功

  function(resp){
          resp = JSON.parse(resp);
          console.log(resp);
          let dispData = '<form>'+


     '<div class="form-group">'+
        '<label>Item</label>'+
        '<input type="text" class="form-control reas-item" id="'+resp["item_details"].master_id+'" value="'+resp["item_details"].item_name+'" disabled>'+
      '</div>'+

      '<div class="form-group">'+
        '<label>Date</label>'+
        '<input type="date" class="form-control reas-date">'+
      '</div>'+

      '<div class="form-group">'+
        '<label>Quantity</label>'+
        '<input type="number" class="form-control reas-quantity" min="1" max="'+resp["item_details"].quantity+'" value="'+resp["item_details"].quantity+'" >'+
      '</div>'+

      '<div class="form-group">'+
        '<label>Reassign To:</label>'+
        '<select class="form-control reas-staff">'
          for (var i = 0; i < resp['trachers_list'].length; i++) {
          var staffName = resp['trachers_list'][i].first_name+" "+resp['trachers_list'][i].middle_name+" "+resp['trachers_list'][i].last_name
          +'<option value="'+resp['trachers_list'][i].wp_usr_id+'">'+staffName+'</option>'

        }
        '</select>'+
      '</div>'+

      '</form>';
      /*for (var i = 0; i < resp['trachers_list'].length; i++) {
        let staffName = resp['trachers_list'][i].first_name+" "+resp['trachers_list'][i].middle_name+" "+resp['trachers_list'][i].last_name
        $(".reas-staff").html('<option value="'+resp['trachers_list'][i].wp_usr_id+'">'+staffName+'</option>');

      }*/
}

请参阅循环注释，我也尝试过，但也不起作用。

---

这就是我的json的样子

请执行如下代码：

  function(resp){
          resp = JSON.parse(resp);
          console.log(resp);
          let dispData = '<form>'+


     '<div class="form-group">'+
        '<label>Item</label>'+
        '<input type="text" class="form-control reas-item" id="'+resp["item_details"].master_id+'" value="'+resp["item_details"].item_name+'" disabled>'+
      '</div>'+

      '<div class="form-group">'+
        '<label>Date</label>'+
        '<input type="date" class="form-control reas-date">'+
      '</div>'+

      '<div class="form-group">'+
        '<label>Quantity</label>'+
        '<input type="number" class="form-control reas-quantity" min="1" max="'+resp["item_details"].quantity+'" value="'+resp["item_details"].quantity+'" >'+
      '</div>'+

      '<div class="form-group">'+
        '<label>Reassign To:</label>'+
        '<select class="form-control reas-staff">';
          for (var i = 0; i < resp['trachers_list'].length; i++) {
          var staffName = resp['trachers_list'][i].first_name+" "+resp['trachers_list'][i].middle_name+" "+resp['trachers_list'][i].last_name;
          dispData += '<option value="'+resp['trachers_list'][i].wp_usr_id+'">'+staffName+'</option>';

        }
        dispData += '</select>'+
      '</div>'+

      '</form>';
      /*for (var i = 0; i < resp['trachers_list'].length; i++) {
        let staffName = resp['trachers_list'][i].first_name+" "+resp['trachers_list'][i].middle_name+" "+resp['trachers_list'][i].last_name
        $(".reas-staff").html('<option value="'+resp['trachers_list'][i].wp_usr_id+'">'+staffName+'</option>');

      }*/
}

---

在JSFIDLE中共享代码？实际上它是一个回调函数。请参阅代码的最后一部分，这将帮助您理解我正在尝试做什么