dynamically generate a list dropdown in javascript from JSON data

Question

I have generated a form and storing it into a JS variable but the problem is I want to generate a dropdown list. Data for that dropdown is present in an array into JSON. I tried to concat values using a for loop but that didn't work

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

      }*/
}

See Commented for loop I've tried that as well but that is also not working. This is how my json looks like

actually its a callback function. see the last part of code i.e <select> that will help you to understand what i am trying to do — Zainul Abideen
– Zainul Abideen, Commented Aug 19, 2018 at 8:22

kiran malvi · Accepted Answer · 2018-08-19 08:30:29Z

Please do code like below:

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

      }*/
}

Collectives™ on Stack Overflow

dynamically generate a list dropdown in javascript from JSON data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related