Не удается создать динамический HTML с помощью вызова AJAX

Question

У меня есть вызов ajax api, и я получаю ответ в формате json.Я хочу создать динамический HTML и отображать каждое значение в элементах HTML.Я пытался получить ответ от API, но он не будет создавать HTML.Может кто-нибудь помочь мне разобраться.Также хочу показать сообщение, если в ответе пустое значение json (данные недоступны)
Мой ожидаемый результат - если 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

Попробуйте этот код в вашем обработчике успеха 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/

Answer 2

Вам необходимо проверить длину пассажиров, затем выбрать правильный 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 3

Вы должны получить доступ к 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);
}