Can Not Create Dynamic Html Using Ajax Call
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
Solution 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>';
});
Solution 2:
You should access the driver_data and then do looping. Below is the working result and below one is the main change
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>Updated code
After seeing your posted image, in the success callback function you should do like below. The change in the success callback is given by below
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);
}Solution 3:
Try this code in your ajax success handler
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);
Here is working fiddle for that http://jsfiddle.net/codething/jcq8h7b2/36/
Post a Comment for "Can Not Create Dynamic Html Using Ajax Call"