Question

我已经调用了ajax api调用，并且得到了json格式的响应。我想创建动态HTML并在HTML元素中显示每个值。我试过我从API得到响应，但它不会创建HTML。谁能帮我解决这个问题。如果响应的json为空，还想显示Message（无可用数据）
我预期的输出结果是，如果3位乘客然后显示所有3列的详细信息，如果2则仅显示2列的详细信息，如果1则仅显示1列的详细信息作为屏幕截图。如果没有乘客，它将显示一条消息“没有乘客可用”

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

Json成功功能显示 [图片] [2]

我已经应用了提供的解决方案

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

[小提琴] [4]

我当前的代码

    $(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

您需要检查乘客的长度，然后选择合适的colclass，例如：

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

Answer 2

您应该访问driver_data，然后进行循环。下面是工作结果，下面是主要变化

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 = '<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);
  }

  createhtml(testdata);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container"></div>

更新代码

看到发布的图像后，在成功回调函数中，您应该像下面这样。成功回调的更改如下所示：

var data = data.responseJSON.driver_data;

success: function(data) {
  var data = data.responseJSON.driver_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 3

在您的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 += '<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);

这里正在为此http://jsfiddle.net/codething/jcq8h7b2/36/

无法使用Ajax调用创建动态HTML

3 个答案: