根据JSON数据在javascript中动态生成列表下拉列表

Question

我已经生成了一个表单并将其存储到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看起来像

的样子

Answer 1

请执行以下代码：

  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>');

      }*/
}