javascript - Can not create dynamic html using ajax call

Question

I have call ajax api call & i get response in json format. I want to create dynamic HTML & display each values in HTML elements. I tried i get response from API but it wont create HTML. Can anyone help me to sort it out. Also want to show Message if response having empty json (No data available)
My expected out put is if 3 passengers then show all 3 columns with details if 2 then it will shows only 2 columns with details, if 1 then it will shows only 1 columns with details as screenshot. If no passenger it'll show a message "No passenger available"

[![enter image description here][1]][1]

Json success function shows [Image][2]

I have apply solution which provided

[![enter image description here][3]][3]

[Fiddle][4]

My current code

    $(document).ready(function() {

            $.get("http://10.26.32.4:8765/api/rating-service/rate/trip/getdetails/30/COMPLETED", function(data, status) {
                var output = '';
                for (i = 0; i < data.length; i++) {
                    var driverHtml = '<div class="col-md-4 driver"><div><label class="header">Driver Details</label></div><div><label>Name:</label><span class="dname">' + data[i].employeename + '</span></div>';
                    var passengerHtml = '<div class="col-md-8 passenger"><div><label class="header">Passenger Details</label></div><div><label>Name:</label><span class="pname">' + data[i].passenger_data[0].employeename + '</span></div><hr>';
                    output += driverHtml + passengerHtml;
                }
                $('#container').html(output);
            });
        });

        $(document).ready(function() {
            $("[id*=btnsubmit]").click(function() {
                /*debugger;*/
                var obj = {};
                obj = $.trim($("[id*=tripinfo]").val());
                objs = $.trim($("[id*=tripstatus]").val());
                console.log(obj)
                console.log(objs)
                $.ajax({
                    type: "GET",
                    url: "API URL" + obj + '/' + objs,
                    //dataType: "json",
                    success: function(data) {
                        //console.log(data)
                        var output = '';
                        for (i = 0; i < data.length; i++) {
                            var driverHtml = '<div class="col-md-4 driver"><div><label class="header"><b>Driver Details</b></label></div><div><label>Name:</label><span class="dname">' + data[i].employeename + '</span></div><div><label>Vehicle No:</label><span class="dname">' + data[i].vehicleno + '</span></div><div><label>Mobile:</label><span class="dname">' + data[i].mobilenumber + '</span></div></div>';
                            console.log(driverHtml);

                            var passengerHtml = '<div class="col-md-8 passenger"><div><label class="header"><b>Passenger Details</b></label></div><div><label>Name:</label><span class="pname">' + data[i].passenger_data[0].employeename + '</span></div><div><label>Mobile No:</label><span class="pname">' + data[i].passenger_data[0].mobilenumber + '</span></div><div><label>Email:</label><span class="pname">' + data[i].passenger_data[0].email + '</span></div></div><hr>';
                            output += driverHtml + passengerHtml;
                        }
                        $('#container').html(output);
                    }
                });
            });

        });

Answer 1

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