[Solved] Can not create dynamic html using ajax call

by


You need to check the length of the passengers then chose the right colclass like :

$.each(data.driver_data, function(key, val) {
  var pdetails = val.passenger_data;

  output += '<div class="row">';

  output += '<div class="col-md-4 driver"><div><label class="header"><b>Driver Details</b></label></div><div><label>Name:</label><span class="dname">' + val.employeename + '</span></div><div><label>Vehicle No:</label><span class="dname">' + val.vehicleno + '</span></div><div><label>Mobile:</label><span class="dname">' + val.mobilenumber + '</span></div></div>';

  var colclass="8";
  var pdetails_length = pdetails.length;

  if (pdetails_length === 1)
    colclass="12";
  else if (pdetails_length === 2)
    colclass="6";
  else if (pdetails_length === 3)
    colclass="4";
  else if (pdetails_length === 4)
    colclass="3";

  output += '<div class="col-md-8 passenger"><div class="row">';

  $.each(pdetails, function(pkey, pval) {
    output += '<div class="col-md-' + colclass + '"><div><label class="header"><b>Passenger Details</b></label></div><div><label>Name:</label><span class="pname">' + pval.employeename + '</span></div><div><label>Mobile No:</label><span class="pname">' + pval.mobilenumber + '</span></div><div><label>Email:</label><span class="pname">' + pval.email + '</span></div></div>';
  });

  output += '</div></div></div><hr>';
});

10

solved Can not create dynamic html using ajax call