No se puede crear html dynamic utilizando la llamada ajax

He llamado ajax api call y obtengo respuesta en formato json. Quiero crear HTML dynamic y mostrar cada valor en elementos HTML. Intenté obtener una respuesta de la API pero no creará HTML. ¿Alguien puede ayudarme a resolverlo? También desea mostrar Mensaje si la respuesta tiene un json vacío (No hay datos disponibles)
Mi salida esperada es si 3 pasajeros luego muestran las 3 columnas con detalles si 2 entonces solo mostrará 2 columnas con detalles, si 1 entonces mostrará solo 1 columnas con detalles como captura de pantalla. Si no hay pasajero, se mostrará un mensaje “No hay pasajeros disponibles”.

[! [ingrese la descripción de la imagen aquí] [1]] [1]

La función de éxito de Json muestra [Imagen] [2]

He aplicado la solución que he proporcionado.

[! [ingrese la descripción de la imagen aquí] [3]] [3]

[Violín] [4]

Mi codigo actual

$(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 = '
' + data[i].employeename + '
'; var passengerHtml = '
' + data[i].passenger_data[0].employeename + '

'; 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 = '
' + data[i].employeename + '
' + data[i].vehicleno + '
' + data[i].mobilenumber + '
'; console.log(driverHtml); var passengerHtml = '
' + data[i].passenger_data[0].employeename + '
' + data[i].passenger_data[0].mobilenumber + '
' + data[i].passenger_data[0].email + '

'; output += driverHtml + passengerHtml; } $('#container').html(output); } }); }); });

colclass verificar la longitud de los pasajeros y luego elegir la colclass adecuada, como:

 $.each(data.driver_data, function(key, val) { var pdetails = val.passenger_data; output += '
'; output += '
' + val.employeename + '
' + val.vehicleno + '
' + val.mobilenumber + '
'; 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 += '
'; $.each(pdetails, function(pkey, pval) { output += '
' + pval.employeename + '
' + pval.mobilenumber + '
' + pval.email + '
'; }); output += '

'; });

Debes acceder al driver_data y luego hacer un bucle. A continuación se muestra el resultado de trabajo y debajo de uno es el cambio principal.

 var data = data.driver_data; 
 $(document).ready(function() { var testdata = { "driver_data": [{ "tripId": 885, "creationDate": "2018-09-18", "accDestLocation": "CASA RIO Club House, Oceania Internal Road, Nilje Gaon, Maharashtra, India", "accDestGeoLat": "19.1481581", "accDestGeoLong": "73.07762149999996", "accEndTime": 1537277407813, "accScrLocation": "RCP GATE A OFFICE, Reliance Corporate Park, MIDC Industrial Area, Ghansoli, Navi Mumbai, Maharashtra, India", "accSrcGeoLat": "19.1268537", "accSrcGeoLong": "73.00511699999993", "accStartTime": 1537277407813, "tripStatus": "COMPLETED", "createdBy": "SYSTEM", "bookedSeats": 0, "employeeid": "P10062044", "employeename": "Venkat Chepuri", "vehicleno": "MH09CQ7778", "vehiclecolor": "silver", "vehicletype": "OWN CAR", "vehiclemake": "hondacity", "srclocation": "RCP GATE A OFFICE, Reliance Corporate Park, MIDC Industrial Area, Ghansoli, Navi Mumbai, Maharashtra, India", "srclat": "19.1268537", "srclong": "73.00511699999993", "starttime": "2018-09-18T13:30:07.813Z", "destlocation": "CASA RIO Club House, Oceania Internal Road, Nilje Gaon, Maharashtra, India", "destlat": "19.1481581", "destlong": "73.07762149999996", "seatcount": 1, "mobilenumber": "+917977589953", "email": "Venkat.Chepuri@ril.com", "routeid": 0, "distance": 14.3, "passenger_data": [{ "tripId": 1015, "creationDate": "2018-09-18", "tripStatus": "CANCELLED", "createdBy": "SYSTEM", "endTime": "2018-09-18T13:21:24.882Z", "employeeid": "P10060725", "employeename": "Siva Juturi", "seatcount": 1, "starttime": "2018-09-18T13:30:36.394Z", "mobilenumber": "+917977526935", "email": "Siva.Juturi@ril.com", "srclocation": "RCP GATE A OFFICE, Reliance Corporate Park, MIDC Industrial Area, Ghansoli, Navi Mumbai, Maharashtra, India", "srclat": "19.1268537", "srclong": "73.00511699999993", "destlocation": "CASA RIO Club House, Oceania Internal Road, Nilje Gaon, Maharashtra, India", "destlat": "19.1481581", "destlong": "73.07762149999996", "amount": null }] }, { "tripId": 879, "creationDate": "2018-09-16", "accDestLocation": "Vashi, Navi Mumbai, Maharashtra, India", "accDestGeoLat": "19.0770644", "accDestGeoLong": "72.99899249999999", "accEndTime": 1536154216056, "accScrLocation": "RCP GATE A OFFICE, Reliance Corporate Park, MIDC Industrial Area, Ghansoli, Navi Mumbai, Maharashtra, India", "accSrcGeoLat": "19.1268537", "accSrcGeoLong": "73.00511699999993", "accStartTime": 1536154216056, "tripStatus": "COMPLETED", "createdBy": "SYSTEM", "bookedSeats": 1, "employeeid": "P10061231", "employeename": "Goutham Mekala", "vehicleno": "MH43W8007", "vehiclecolor": "DARK GREY", "vehicletype": "OWN CAR", "vehiclemake": "Hyundai i20", "srclocation": "RCP GATE A OFFICE, Reliance Corporate Park, MIDC Industrial Area, Ghansoli, Navi Mumbai, Maharashtra, India", "srclat": "19.1268537", "srclong": "73.00511699999993", "starttime": "2018-09-05T13:30:16.056Z", "destlocation": "Vashi, Navi Mumbai, Maharashtra, India", "destlat": "19.0770644", "destlong": "72.99899249999999", "seatcount": 1, "mobilenumber": "+917977589677", "email": "Goutham.Mekala@ril.com", "routeid": 0, "distance": 7.2, "passenger_data": [{ "tripId": 995, "creationDate": "2018-09-05", "tripStatus": "CANCELLED", "createdBy": "SYSTEM", "endTime": "2018-09-05T13:22:34.065Z", "employeeid": "P10062044", "employeename": "Venkat Chepuri", "seatcount": 1, "starttime": "2018-09-05T13:30:14.197Z", "mobilenumber": "+917977589953", "email": "Venkat.Chepuri@ril.com", "srclocation": "RCP GATE A OFFICE, Reliance Corporate Park, MIDC Industrial Area, Ghansoli, Navi Mumbai, Maharashtra, India", "srclat": "19.1268537", "srclong": "73.00511699999993", "destlocation": "Vashi, Navi Mumbai, Maharashtra, India", "destlat": "19.0770644", "destlong": "72.99899249999999", "amount": null }] } ] } function createhtml(data) { //console.log(data) var data = data.driver_data; var output = ''; for (i = 0; i < data.length; i++) { var driverHtml = '
' + data[i].employeename + '
' + data[i].vehicleno + '
' + data[i].mobilenumber + '
'; //console.log(driverHtml); var passengerHtml = '
' + data[i].passenger_data[0].employeename + '
' + data[i].passenger_data[0].mobilenumber + '
' + data[i].passenger_data[0].email + '

'; output += driverHtml + passengerHtml; } $('#container').html(output); } createhtml(testdata); });
  

Prueba este código en tu controlador de éxito ajax

 var output = ''; if (typeof data == "undefined"){ output = 'No data available'; } else { $.each(data.driver_data, function(key, val) { var pdetails = val.passenger_data; output += '
'; output += '
' + val.employeename + '
' + val.vehicleno + '
' + val.mobilenumber + '
'; var colclass = '8'; if(pdetails.count == 1) colclass = '8'; if(pdetails.count == 2) colclass = '4'; if(pdetails.count == 3) colclass = '2'; $.each(pdetails, function(pkey, pval) { output += '
' + pval.employeename + '
' + pval.mobilenumber + '
' + pval.email + '
'; }); output += '

'; }); } $('#container').html(output);

Aquí está trabajando el violín para eso http://jsfiddle.net/codething/jcq8h7b2/36/