Javascript 无法使用ajax调用创建动态html

我调用了ajaxapi调用&我得到了json格式的响应。我想创建动态HTML&在HTML元素中显示每个值。我试图从API得到响应，但它不会创建HTML。谁能帮我把它整理一下吗。如果响应包含空json（没有可用数据），还希望显示消息
我的预期输出是，如果3名乘客显示所有3列的详细信息，如果2名乘客，则仅显示2列的详细信息，如果1名乘客，则仅显示1列的详细信息作为屏幕截图。 如果没有乘客，则会显示消息“没有乘客”

[！[在此处输入图像描述][1][1]

Json成功函数显示 [图片][2]

我已应用提供的解决方案

[！[在此处输入图像描述][3][3]

[小提琴][4]

我当前的代码

$（文档）.ready（函数（）{
$.get（”http://10.26.32.4:8765/api/rating-服务/费率/行程/获取详细信息/30/完成”，功能（数据、状态）{
var输出=“”；
对于（i=0；i；
输出+=驱动器HTML+乘客HTML；
}
$（'#container'）.html（输出）；
});
});
$（文档）.ready（函数（）{
$（“[id*=btnsubmit]”。单击（函数（）{
/*调试器*/
var obj={}；
obj=$.trim（$（“[id*=tripinfo]”）和.val（）；
objs=$.trim（$（“[id*=tripstatus]”）和.val（）；
控制台日志（obj）
console.log（objs）
$.ajax({
键入：“获取”，
url:“API url”+obj+'/'+objs，
//数据类型：“json”，
成功：功能（数据）{
//console.log（数据）
var输出=“”；
对于（i=0；i；
输出+=驱动器HTML+乘客HTML；
}
$（'#container'）.html（输出）；
}
});
});
});

您应该访问

驱动程序数据

，然后执行循环。以下是工作结果，以下是主要变化

var data = data.driver_data;

$（文档）.ready（函数（）{
var testdata={
“驱动程序数据”：[{
“tripId”：885，
“创建日期”：“2018-09-18”，
“地点”：“印度马哈拉施特拉邦Nilje Gaon大洋洲内部道路CASA RIO俱乐部”，
“accDestGeoLat”：“19.1481581”，
“accDestGeoLong”：“73.0776214999996”，
“accEndTime”：1537277407813，
“accScrLocation”：“印度马哈拉施特拉邦孟买纳维甘索利MIDC工业区信实公司园区RCP A门办公室”，
“accSrcGeoLat”：“19.1268537”，
“accSrcGeoLong”：“73.005116999993”，
“accStartTime”：1537277407813，
“tripStatus”：“已完成”，
“createdBy”：“系统”，
“预订座位”：0，
“雇员ID”：“P10062044”，
“雇员姓名”：“文卡特·切普里”，
“vehicleno”：“MH09CQ7778”，
“车辆颜色”：“银色”，
“车辆类型”：“自有车辆”，
“汽车制造”：“洪都拉斯”，
“SRC地点”：“印度马哈拉施特拉邦纳维孟买甘索利MIDC工业区信实公司园区RCP A门办公室”，
“srclat”：“19.1268537”，
“srclong”：“73.005116999993”，
“开始时间”：“2018-09-18T13:30:07.813Z”，
“目的地位置”：“印度马哈拉施特拉邦尼耶冈大洋洲内部道路CASA RIO俱乐部”，
“Destrat”：“19.1481581”，
“destlong”：“73.0776214999996”，
“seatcount”：1，
“手机号码”：“+917977589953”，
“电子邮件”：“文卡特”。Chepuri@ril.com",
“routeid”：0，
“距离”：14.3，
“乘客信息”：[{
“tripId”：1015，
“创建日期”：“2018-09-18”，
“tripStatus”：“已取消”，
“createdBy”：“系统”，
“结束时间”：“2018-09-18T13:21:24.882Z”，
“雇员ID”：“P10060725”，
“雇员姓名”：“湿婆朱图里”，
“seatcount”：1，
“开始时间”：“2018-09-18T13:30:36.394Z”，
“手机号码”：“+917977526935”，
“电子邮件”：“湿婆”。Juturi@ril.com",
“SRC地点”：“印度马哈拉施特拉邦纳维孟买甘索利MIDC工业区信实公司园区RCP A门办公室”，
“srclat”：“19.1268537”，
“srclong”：“73.005116999993”，
“目的地位置”：“印度马哈拉施特拉邦尼耶冈大洋洲内部道路CASA RIO俱乐部”，
“Destrat”：“19.1481581”，
“destlong”：“73.0776214999996”，
“金额”：空
}]
},
{
“tripId”：879，
“创建日期”：“2018-09-16”，
“地点”：“印度马哈拉施特拉邦孟买纳维瓦希”，
“accDestGeoLat”：“19.0770644”，
“accDestGeoLong”：“72.9989924999999”，
“accEndTime”：1536154216056，
“accScrLocation”：“印度马哈拉施特拉邦孟买纳维甘索利MIDC工业区信实公司园区RCP A门办公室”，
“accSrcGeoLat”：“19.1268537”，
“accSrcGeoLong”：“73.005116999993”，
“accStartTime”：1536154216056，
“tripStatus”：“已完成”，
“createdBy”：“系统”，
“预定座位”：1，
“雇员ID”：“P
var output = '';
  if (typeof data == "undefined"){
    output = 'No data available';
 } else {
    $.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';
        if(pdetails.count == 1)  colclass = '8';
        if(pdetails.count == 2)  colclass = '4';
        if(pdetails.count == 3)  colclass = '2';
        $.each(pdetails, function(pkey, pval) {
                    output += '<div class="col-md-'+colclass+' passenger"><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><hr>';
    });
}
    $('#container').html(output);

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