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

Question

我已经生成了一个表单并将其存储到JS变量中，但是问题是我想生成一个下拉列表。 该下拉列表的数据存在于JSON数组中。 我试图使用for循环来连接值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>');

      }*/
}

参见Commented for loop，我也尝试过这样做，但这也不起作用。 这就是我的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>');

      }*/
}